ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS での疑似クラス セレクター ホバーの使用を示す例
CSS での疑似クラス セレクター ホバーの使用を示す例
- yuliaオリジナル
- 2018-10-23 15:47:215293ブラウズ
ページ レイアウトでは、マウスが通過するときに特別なスタイルを設定できる CSS のホバー セレクターがよく使用されます。CSS 疑似クラス セレクターの使い方# ＃＃？この記事では、CSS でホバーを使用する方法を説明し、例を示して説明します。これは一定の参考価値があるため、興味のある友人は参照してください。 疑似クラス セレクターのホバーでは、マウスがリンク上に移動したときに、フォント サイズ、背景色、表示と非表示などの特別なスタイルを設定できます。
注: 疑似クラス セレクターのホバーは、リンクだけでなくすべての要素に作用します。
ホバーに似たセレクターには、リンク、訪問済み、アクティブなどがあります。リンク セレクターは訪問されていないリンク スタイルを設定でき、訪問済みセレクターは訪問済みのリンク スタイルを設定でき、アクティブ セレクターはアクティブなリンク スタイルを設定できます。不明な学生は、
CSS ビデオ チュートリアル
説明: マウスが通過したときリンクの上で a タグを押すと、フォントの色が赤に変わり、フォントが大きくなります。コードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.aa{text-decoration: none;color: #000000;}
.aa:hover{color: red;font-size: 20px ;}
</style>
</head>
<body>
<a href="#" class="aa">欢迎大家来PHP中文网学习交流</a>
</body>
</html>最初の図は元の効果で、2 番目の図は効果後に得られます。マウスがその上を通過します。
使用法 2:
説明: マウスが div の上を通過すると、そのサブ要素の色が紫に変わり、フォントが大きくなり、赤い境界線が表示されます。コードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.aa{text-decoration: none;color: #000000;}
.box:hover .aa{color: purple;font-size: 30px ;border: 1px solid red;}
</style>
</head>
<body>
<div class="box">
<a href="#" class="aa">望子成龙，望女成凤</a>
</div>
</body>
</html> 効果は次のとおりです。
使用法 3:
説明: マウスが上を通過すると、兄弟要素の背景色が黄色に変わり、コードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.aa{text-decoration: none;color: #000000;}
.box1:hover + .box2{font-size: 30px ;background: yellow;}
</style>
</head>
<body>
<div class="box1">床前明月光</div>
<div class="box2">疑是地上霜</div>
</body>
</html>レンダリング:
上記は、疑似クラス セレクターのホバーの使用方法を紹介しています。初心者の方は、自分のコードで効果が得られるかどうかを試してみてください。この記事が役立つことを願っています。 
以上がCSS での疑似クラス セレクター ホバーの使用を示す例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。