ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSでのhover疑似クラスの使用例
CSSでのhover疑似クラスの使用例
- 黄舟オリジナル
- 2017-10-21 10:37:341917ブラウズ
: ホバーの使用、つまりマウス ポインターが要素内に移動したときに行われるスタイル設定
例 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>
マウス ポインターが要素内に移動したときに上記の状況が発生し、要素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>以上がCSSでのhover疑似クラスの使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。