実装方法: 1. 要素に「display: none;」スタイルを追加し、最初に要素を非表示にします; 2. 「:hover」セレクターと「display:block;」スタイルを使用してマウスを設定しますオーバーディスプレイ効果の場合、構文は「親要素:ホバー要素 {display:block;}」です。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
#マウスが上を通過した後の表示と非表示効果を実現する CSS
#実装アイデア::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 を通過するときに表示および非表示のままにする効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
