CSSで要素を通過するときにマウスで画像を表示するように設定する方法-CSSチュートリアル-php.cn

CSSで要素を通過するときにマウスで画像を表示するように設定する方法

青灯夜游

リリース： 2023-01-07 11:44:44

オリジナル

10839 人が閲覧しました

CSS では、「:hover」セレクターを使用して、マウスが要素の上を通過したときに画像を表示する効果を実現できます。「:hover」セレクターは、マウスが移動したときに追加される特別なスタイルを指定するために使用されます。ポインタは要素上に浮動します。構文形式は「要素" :hover{背景: url(画像アドレス);}」です。

CSSで要素を通過するときにマウスで画像を表示するように設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS では、「:hover」セレクターを使用して、マウスが要素の上を通過したときに画像を表示する効果を実現できます。

: ホバーセレクターは、マウスが要素上に移動したときに追加される特別なスタイルを指定します。

コード例を詳しく見てみましょう:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				width: 400px;
				height: 300px;
				border: 1px solid red;  
			}
			div:hover{
				background: url(img/1.jpg);
				background-size: 400px;
			}
		</style>
	</head>
	<body>
		<div>将鼠标移动到div盒子中：</div>

	</body>
</html>

ログイン後にコピー

エフェクト画像:

CSSで要素を通過するときにマウスで画像を表示するように設定する方法