Wie kann ich die Auswirkungen von CSS :hover umkehren?

Umkehren der Auswirkungen von :hover mit CSS

Mit der Pseudoklasse :hover können Entwickler bestimmte Stile auf Elemente anwenden, wenn der Mauszeiger bewegt wird schwebt über ihnen. Es besteht jedoch häufig die Notwendigkeit, einen Kontrasteffekt für Fälle zu definieren, in denen die Maus ein Element verlässt.

Gibt es eine CSS-Alternative zu :hover, die beim Verlassen der Maus ausgelöst wird?

Um einen Effekt zu erzielen, der dem Effekt „:hover“ entgegengesetzt ist, der bei Eingabe mit der Maus aktiviert wird, ist es wichtig, sich die Definition von „hover“ zu merken: Es wählt Elemente aus, wenn die Maus darüber fährt. Um dieses Verhalten umzukehren, kann stattdessen jeder Punkt anvisiert werden, an dem sich die Maus nicht über dem Element befindet.

Implementierung des umgekehrten Effekts

Stellen Sie sich einen Anwendungsfall vor, bei dem die Farbe eines Menüelements beim Bewegen des Mauszeigers von #999 zu Schwarz wechselt. Um den umgekehrten Effekt beim Verlassen der Maus zu erzeugen, können wir die Übergänge auf den Link selbst und nicht auf den Hover-Zustand verschieben:

ul li a {
    color:#999;       
    transition: color 0.5s linear; /* vendorless fallback */
}

ul li a:hover {
    color:black;
    cursor: pointer;
}

Diese Lösung stellt sicher, dass der Farbübergang von Schwarz zu #999 erfolgt, wenn die Maus gedrückt wird verlässt den Linkbereich.

Außerdem hat CSS-tricks einen Artikel bereitgestellt, der zeigt, wie man unterschiedliche Übergänge für Hover-On und Hover-Off festlegt heißt es:

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}

Das obige ist der detaillierte Inhalt vonWie kann ich die Auswirkungen von CSS :hover umkehren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!