マウスホバー時に要素を表示する方法
- 前のページ： ツールチップ：
- 次のページ： ポップアップウィンドウ：
マウスホバー時に要素を表示する方法を学びます。
私にマウスをホバーしてください。
上記のdivにマウスをホバーすると、表示されます。
マウスホバー時に要素を表示する方法
第1ステップ - HTMLを追加：
<div class="myDIV">私にマウスをホバーしてください。</div> <div class="hide">上記のdivにマウスをホバーすると、表示されます。</div>
第2ステップ - CSSを追加：
.hide {
display: none;
}
.myDIV:hover + .hide {
display: block;
color: red;
}
例解：
相邻同级選択子 (+を選択しました。
「相邻」の意味は「直後に続く」ということです。上記の例では、すべての class=".hide" の要素、これらの要素はホバー時に直後に配置される class=".myDIV" の要素の後：
関連ページ：
チュートリアル：CSSコンボネータ：
- 前のページ： ツールチップ：
- 次のページ： ポップアップウィンドウ：
