方法-ホバーに要素を表示する
ホバーで要素を表示する方法を学びます。
私にカーソルを合わせます。
I am shown when someone hovers over the div above.
ホバーで要素を表示する方法
ステップ1)HTMLを追加します。
例
<div class="myDIV">Hover over me.</div>
<div class="hide">I am shown when
someone hovers over the div above.</div>
ステップ2)CSSを追加します。
例
.hide {
display: none;
}
.myDIV:hover + .hide {
display: block;
color: red;
}
例の説明
隣接する兄弟セレクター(+
)は、指定された要素の隣接する兄弟であるすべての要素を選択します。
「隣接する」という単語は「すぐ後に続く」を意味し、上記の例では、ホバー時に「」がclass=".hide"
付いた要素の直後に配置された、が付いたすべての要素を選択します。class=".myDIV
隣接するセレクターの詳細については、 CSSコンビネーターチュートリアルにアクセスしてください。