ホームページ > 記事 > ウェブフロントエンド > css:ホバー疑似クラスの使い方
css:ホバー疑似クラスの使い方
- 一个新手オリジナル
- 2017-10-20 11:05:593569ブラウズ
: ホバーの使用、つまりマウス ポインターが要素内に移動したときに行われるスタイル設定
例 1
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>demo01</title>
<style>
*{
margin: 0;
padding: 0;
}
ul li{
width: 300px;
margin-top: 10px;
background: #ff0000;
}
ul li:hover{
background: #000000;
}
</style></head><body>
<ul>
<li></li>
<li></li>
<li></li>
</ul></body></html>マウス ポインターが要素内に移動し、要素自体が新しいものに変更されると、上記の状況が存在します。 style through: hover
例 2
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>demo01</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 300px;
height: 300px;
border: 1px solid #ff9f5a;
}
.content{
width: 100px;
height: 100px;
background: #27e7ff;
}
.container:hover .content{
background: #000000;
}
</style></head><body>
<p class="container">
<p class="content"></p>
</p></body></html>上記の例では、親子関係がある場合、親の :hover を通じて子のスタイルを変更できます。 記述方法は .container:hover .content です。 、ホバーの後にスペースがありますが、、子:ホバーは親のスタイルを変更できません
例 3<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>demo01</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 300px;
height: 300px;
border: 1px solid #ff9f5a;
}
.content{
width: 100px;
height: 100px;
background: #27e7ff;
}
.container:hover +.content{
background: #000000;
}
</style></head><body>
<p class="container"></p>
<p class="content"></p></body></html>
上記の例では、2 つの要素が親子関係ではなく兄弟関係である場合関係がある場合、 .container:hover .content は次のように記述されます。 無効な場合、効果を表示するには「+」記号、つまり .container:hover +.content を渡す必要があります。 2つの要素の順序に注意してください~
以上がcss:ホバー疑似クラスの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。