CSS での疑似クラスセレクターホバーの使用を示す例-CSSチュートリアル-php.cn

CSS での疑似クラスセレクターホバーの使用を示す例

yulia

リリース： 2018-10-23 15:47:21

オリジナル

5258 人が閲覧しました

ページレイアウトでは、マウスが通過するときに特別なスタイルを設定できる CSS のホバーセレクターがよく使用されます。CSS 疑似クラスセレクターの使い方# ＃＃？この記事では、CSS でホバーを使用する方法を説明し、例を示して説明します。これは一定の参考価値があるため、興味のある友人は参照してください。疑似クラスセレクターのホバーでは、マウスがリンク上に移動したときに、フォントサイズ、背景色、表示と非表示などの特別なスタイルを設定できます。

注: 疑似クラスセレクターのホバーは、リンクだけでなくすべての要素に作用します。

ホバーに似たセレクターには、リンク、訪問済み、アクティブなどがあります。リンクセレクターは訪問されていないリンクスタイルを設定でき、訪問済みセレクターは訪問済みのリンクスタイルを設定でき、アクティブセレクターはアクティブなリンクスタイルを設定できます。不明な学生は、
CSS ビデオチュートリアル

を参照してください。

使用法 1:

マウスがリンク上を通過したときに独自のスタイルを変更します (ホバー後のスタイルに直接接続されています)

説明: マウスが通過したときリンクの上で 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 番目の図は効果後に得られます。マウスがその上を通過します。

CSS での疑似クラスセレクターホバーの使用を示す例

CSS での疑似クラスセレクターホバーの使用を示す例使用法 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>

ログイン後にコピー

効果は次のとおりです。

CSS での疑似クラスセレクターホバーの使用を示す例使用法 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 での疑似クラスセレクターホバーの使用を示す例