ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSでのホバーの用途は何ですか?
CSSでのホバーの用途は何ですか?
- 青灯夜游オリジナル
- 2020-12-04 17:19:2011345ブラウズ
CSS では、「:hover」セレクターを使用して、マウス ポインターが浮いている要素を選択し、その要素のスタイルを設定します。構文形式は「element:hover{css style};」です。 "; ":hover" は必須です。スタイルが有効になるように、":link" と ":visited" (存在する場合) の後に配置します。
関連する推奨事項: 「 プログラミング チュートリアル 」
: ホバー セレクターは、マウスポインタが浮いています。
ヒント: :hover セレクターは、リンクだけでなくすべての要素で使用できます。
スタイルを有効にするには、CSS 定義で、:hover を :link および :visited (存在する場合) の後に配置する必要があります。
: リンク セレクターは、訪問されていないページを指すリンクのスタイルを設定します。:visited セレクターは、訪問済みのページへのリンクを設定するために使用され、:active セレクターはアクティブなリンクに使用されます。 。
css :ホバーセレクターの使用法
使用法 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 を使用して、a の近くの要素 d を制御します: .a:hover ~ .d {
color:pink;
}
要約すると:
1. 途中にあるもの Control の子要素は追加しないでください; 2. ' ' 兄弟要素 (兄弟要素) を制御します; 3. '～' 近くの要素を制御します;例
ボタンを使用して、ボックスの動作状態を制御します。マウスがボタン上に移動すると、ボックスの動作が停止します。マウスが離れると、ボックスの動作が停止します。ボックスは動き続けます。本文コード:<body>
<div class="btn stop">stop</div>
<div class="animation"></div>
</body>css スタイル: <style>
.animation {
width: 100px;
height: 100px;
background-color: pink;
margin: 100px auto;
animation: move 2s infinite alternate;
-webkit-animation: move 2s infinite alternate;
}
@keyframes move {
0% {
transform: translate(-100px, 0);
}
100% {
transform: translate(100px, 0);
}
}
.btn {
padding: 20px 50px;
background-color: pink;
color: white;
display: inline-block;
}
.stop:hover ~ .animation {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
</style> 関連記事の詳細については、PHP 中国語 Web サイト をご覧ください。 ！
以上がCSSでのホバーの用途は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。