CSSホバーを無効にする方法-フロントエンドQ&A-php.cn

CSSホバーを無効にする方法

藏色散人

リリース： 2020-11-17 10:58:47

オリジナル

4159 人が閲覧しました

CSS ホバーを無効にする理由: 1. CSS 定義で、「a:hover」が「a:link」と「a:visited」の後に配置されていません。2. CSS 定義で、「 a: 「active」は「a:hover」の後に配置されません。

CSSホバーを無効にする方法

推奨: 「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 サイトの他の関連記事を参照してください。