ホームページ > 記事 > ウェブフロントエンド > CSSでホバーを使う方法
CSSでホバーを使う方法
- 清浅オリジナル
- 2019-04-30 10:10:43111057ブラウズ
CSS では、マウス ポインターが浮いている要素を選択するためにホバーを使用します。構文は「ラベル セレクター:hover{スタイル コード;}」です。使用方法: 1. 一時停止された要素上で直接スタイルを変更します。要素; 2. 子要素のスタイルを変更する; 3. 兄弟要素のスタイルを変更する; 4. 隣接する要素のスタイルを変更する など
CSS には hover 属性があり、マウスを上に移動すると有効になり、js と同様の機能を実装することができます。次の記事では、hover属性の詳しい使い方を紹介していきますので、皆さんの参考になれば幸いです。
[おすすめコース: CSS チュートリアル ]
ホバーの定義
:ホバーセレクターマウス ポインターが浮いている要素を選択すると、すべての要素に適用されます
:hover セレクターはすべての要素に適用されます
hover の使用法
使用法 1: 要素の上にマウスを置くと、要素のスタイルを変更できます
例: マウスをフォントの上に置くと、フォントの色が変わります
<style>
h1:hover{
color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
</body>レンダリング:
これは最も一般的な使用法です。スタイルを変更するだけです
使用法 2: ホバーを使用して他のブロックのスタイルを制御します
この使用法は次の 3 つのスタイルに分類できます
(1) サブ要素のスタイルを制御します
<style>
h1:hover p{
background-color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网
<p>hover的用法</p>
</h1>レンダリング:
(2) 兄弟要素のスタイルを制御する
' ' 兄弟要素 (兄弟要素) を制御する
<style>
h1:hover+p{
background-color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
<p>hover的用法</p>レンダリング:
(3) 近くの要素のスタイルを制御します
'～' 近くの要素を制御します
<style>
h1:hover~p{
background-color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
<p>hover的用法</p>レンダリング:
要約: 上記がこの記事の全内容です。皆様のお役に立てれば幸いです。
以上がCSSでホバーを使う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。