ホームページ >ウェブフロントエンド >CSSチュートリアル >ホバーセレクターの使い方
ホバーセレクターの使い方
- php中世界最好的语言オリジナル
- 2018-03-20 17:07:032646ブラウズ
今回はホバーセレクターの使い方と、ホバーセレクターを使用する際の注意点を紹介します。実際の事例を見てみましょう。
場合によってはmouseoverとmouseoutの2つのマウスイベントを使う必要がありますが、jsを書いてlisteningイベントを追加する方が面倒なので、cssで解決できるものは極力cssで解決すると改善できますパフォーマンスについて私の考えを話しましょう :hover: の理解
コンピューター アプリケーションを学習していたとき、先生は、 ドロップダウン メニュー を完了するために :hover セレクターを使用することを教えてくれました。それはわかりましたが、なぜこのように使用されるのかはわかりませんでした。次に、その使用方法を書き留めます
定義と使用法
定義:
:ホバーセレクターは、マウスポインターが置かれている要素を選択するために使用されます。フローティング。
:ホバーセレクターはすべての要素に適用されます
使用法 1:
これは、マウスがスタイル a 上にあるとき、a の背景色が黄色に設定されることを意味します
a:hover
{
background-color:yellow;
}
これは最も一般的な使用法ですが、変更されたばかりですa によるスタイル
使用法 2:
a を使用して他のブロックのスタイルを制御します:
a を使用して a の子要素 b を制御します:
.a:hover .b {
background-color:blue;
}
a を使用して兄弟要素 c (兄弟要素) を制御します) の ):
.a:hover + .c {
color:red;
}
a の最も近い要素 d を制御するには:
1. '+' は兄弟要素を制御します。 (兄弟要素); 3. '～' は近くの要素を制御します。
マウスがボタン上に移動すると、ボックスの移動が停止します。離れていくと、ボックスは動き続けます
.a:hover ~ .d {
color:pink;
}
css スタイル: <body> <p class="btn stop">stop</p> <p class="animation"></p> </body>達成効果:
この記事の事例を読んだ後は、この方法を習得したと思います。 PHP 中国語 Web サイトの他の関連記事にも注目してください。
推奨読書:
CSSの奇妙なボックスモデルと標準ボックスモデルの使い方
以上がホバーセレクターの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。