ホバーが機能しない場合の対処方法-CSSチュートリアル-php.cn

ホバーが機能しない場合の対処方法

藏色散人

リリース： 2023-01-03 09:27:15

オリジナル

9249 人が閲覧しました

ホバーが機能しない場合の解決策: 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 サイトの他の関連記事を参照してください。