So deaktivieren Sie CSS-Hover

藏色散人
Freigeben: 2020-11-17 10:58:47
Original
4069 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

in

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!