ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSSホバーを無効にする方法
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;
}## に変更します# 得られた効果は達成できません 効果 (プラス記号の有無にかかわらず)3. クラス名の記述が間違っています;4.:hover は :link と :visited の前に配置されます;#5. 読み方が間違っています;
#待ってください...以上がCSSホバーを無効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。