ホームページ > 記事 > ウェブフロントエンド > ホバーが機能しない場合の対処方法
ホバーが機能しない場合の対処方法
- 藏色散人オリジナル
- 2021-03-03 10:40:429176ブラウズ
ホバーが機能しない場合の解決策: 1. ":hover" の前のスペースを確認して削除します; 2. 正しいクラス名を確認して変更します; 3. ":hover" が ":hover" に配置されているかどうかを確認しますlink」と「:visited」の場合は、場所を変更するだけです。
このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター。
CSS でのホバーが機能しない理由はいくつかあります:
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 つの場合、マウスの背景は変化しませんが、そのクラス内の他の div の背景色が変化することがわかります。
説明: ホバーの前にスペースを追加しても、:hover の効果はありません。子孫要素には次のような効果があります。 ホバー効果。
[推奨学習: css ビデオ チュートリアル ]
2. マウスが上を通過したら、他の要素のスタイルを変更します:
次の場所にあります。今回は子孫要素と兄弟要素(要素の直後の兄弟要素)のみが影響し、それ以外の:hoverは無効になります
3.クラス名の書き方が間違っています;
4。 : hover は :link および :visited の前に配置されます;
CSS 定義では、a:hover を有効にするには、a:link および a:visited の後に配置する必要があります。
CSS 定義で、a:active を有効にするには、a:hover の後に配置する必要があります。
以上がホバーが機能しない場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。