ホームページ > 記事 > ウェブフロントエンド > マウスが CSS を通過するときに表示および非表示のままにする効果を実現する方法

マウスが CSS を通過するときに表示および非表示のままにする効果を実現する方法

青灯夜游オリジナル: 2021-11-09 17:22:5810660ブラウズ

実装方法: 1. 要素に「display: none;」スタイルを追加し、最初に要素を非表示にします; 2. 「:hover」セレクターと「display:block;」スタイルを使用してマウスを設定しますオーバーディスプレイ効果の場合、構文は「親要素:ホバー要素 {display:block;}」です。

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

#マウスが上を通過した後の表示と非表示効果を実現する CSS

#実装アイデア:

最初に要素 Hide;
次に、「
:hover」セレクターを使用してマウス通過スタイル (表示要素) を設定します。

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 520px;
				height: 50px;
				background-color: #008000;
				
			}
			span{
				color: azure;
				display: none;
			}
			div:hover span{
				display:block;
			}
		</style>
	</head>
	<body>
		<div>
			<span>hello</span>
		</div>
	</body>
</html>

レンダリング:

マウスが CSS を通過するときに表示および非表示のままにする効果を実現する方法 (学習ビデオ共有:

css ビデオチュートリアル

)

以上がマウスが CSS を通過するときに表示および非表示のままにする効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSSで重複した背景画像を削除する方法次の記事：CSSで重複した背景画像を削除する方法

続きを見る