CSS ホバーを無効にする理由: 1. CSS 定義で、「a:hover」が「a:link」と「a:visited」の後に配置されていません。2. CSS 定義で、「 a: 「active」は「a:hover」の後に配置されません。
推奨: 「css ビデオ チュートリアル 」
CSS でホバーがいくつか失敗する 理由:
CSS ホバーを設定するときに、ホバーが機能しないことがあります。理由を要約すると:
ヒント: CSS 定義では、a:hover を配置する必要があります。 a:link および a:visited の後にのみ有効です。
ヒント: CSS 定義では、a:active を有効にするには、a:hover の後に配置する必要があります。
1. set:hover:
前にスペースを追加します。たとえば、
<style type="text/css">
.one {
margin: 0 auto;
width: 400px;
height: 300px;
background: #ced05d;
}
.two {
margin: 0 auto;
width: 100px;
height: 100px;
background: #5a5aea;
}
.three {
margin: 0 auto;
width: 200px;
height: 100px;
background: #4b9c49;
}
.four {
margin: 0 auto;
width: 300px;
height: 100px;
background: #7b4141;
}
.one :hover {
background: #da56d0;
}
</style>
<body>
<h1>测试</h1>
<div class="one">
<div class="two">
</div>
<div class="three">
</div>
<div class="four">
</div>
</div>
</body>マウスがクラス 1 を通過しても背景は変化しないことがわかりますが、 1 つの div 内の他の div を通過します。背景色が変わります。
説明: :hover の前にスペースを追加しても :hover の効果はありませんが、子孫要素には :hover の効果があります。
2. マウスが上を通過したら、他の要素のスタイルを変更します:
この時点では、子孫要素と兄弟要素 (要素の直後の兄弟要素) のみがスタイルを変更していることがわかります。その他: ホバーは失敗します
まだ前の例
.one :hover {
background: #da56d0;
}を
.one:hover .two {
background: #da56d0;
}に変更すると、必要な効果が得られることがわかります。
を
.two:hover +.three {
background: #da56d0;
}に変更することでも効果を得ることができます (「 」記号を削除しても効果は得られないことに注意してください)
を
.two:hover .four {
background: #da56d0;
}#5. 読み方が間違っています;
#待ってください...以上がCSSホバーを無効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
