So deaktivieren Sie CSS-Hover-Front-End-Fragen und Antworten-php.cn

So deaktivieren Sie CSS-Hover

藏色散人

Freigeben： 2020-11-17 10:58:47

Original

4157 Leute haben es durchsucht

Die Gründe, warum CSS-Hover fehlschlägt: 1. In der CSS-Definition wird „a:hover“ nicht nach „a:link“ und „a:visited“ platziert. 2. In der CSS-Definition wird „a:active“ nicht platziert nach „a:hover“ platziert.

So deaktivieren Sie CSS-Hover

Empfehlung: „CSS-Video-Tutorial“

Mehrere Gründe für Hover-Fehler in CSS:

Beim Einrichten von CSS-Hover werden Sie manchmal feststellen, dass Hover nicht funktioniert. Lassen Sie uns die Gründe zusammenfassen :

Tipps: In der CSS-Definition muss a:hover nach a:link und a:visited platziert werden, um gültig zu sein.

Tipps: In der CSS-Definition muss a:active nach a:hover platziert werden, um gültig zu sein. ?? : Vor:hover hinzufügen Der Raum selbst hat keinen :hover-Effekt, aber untergeordnete Elemente haben einen :hover-Effekt.

2. Wenn Sie mit der Maus darüber fahren, ändern Sie den Stil anderer Elemente:

Zu diesem Zeitpunkt werden Sie feststellen, dass nur untergeordnete Elemente und Geschwisterelemente (Geschwisterelemente unmittelbar nach dem Element) eine Wirkung haben, während andere :hover-Elemente eine Wirkung haben ungültig

Immer noch das gleiche Beispiel

Das Ändern von

<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>

Nach dem Login kopieren

.one :hover {  
        background: #da56d0;  
    }

Nach dem Login kopieren

hat ergeben, dass wir den gewünschten Effekt erzielen können

Das Ändern in

.one:hover .two {  
        background: #da56d0;  
    }

Nach dem Login kopieren

kann ebenfalls den Effekt erzielen (beachten Sie, dass, wenn das „+“-Zeichen entfernt wird, der Effekt wird nicht erreicht)

Eine Änderung in

.two:hover +.three {  
        background: #da56d0;  
    }

Nach dem Login kopieren

kann unseren Effekt nicht erzielen (mit oder ohne das Pluszeichen)

3. Der Klassenname ist falsch geschrieben;

4.:hover wird vor :link platziert und :besucht;

5. Du hast es falsch gelesen;

Warte...

Das obige ist der detaillierte Inhalt vonSo deaktivieren Sie CSS-Hover. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!