Wie kann ich den CSS-Hover-Status beibehalten, nachdem die Maus das Element verlassen hat?

CSS-Hover-Status nach „Unhovering“ beibehalten

Im Webdesign wird der Hover-Status häufig verwendet, um zusätzliche Inhalte beim Bewegen der Maus anzuzeigen. Standardmäßig verschwindet dieser Inhalt jedoch, wenn der Mauszeiger den angegebenen Bereich verlässt. In diesem Artikel wird eine CSS-Lösung vorgestellt, um den Hover-Status nach dem „Entfernen“ des Cursors sichtbar zu halten.

Das bereitgestellte Beispiel verwendet die Pseudoklasse „:hover“, um ein Bild anzuzeigen, wenn man mit der Maus über ein Div fährt. Das Bild verschwindet jedoch, wenn das Hover-Ereignis endet. Um dieses Problem zu lösen, kann die folgende CSS-Technik eingesetzt werden:

div img {
    position: absolute;
    opacity: 0;
    transition: 0s 180s;
}

div:hover img {
    opacity: 1;
    transition: 0s;
}

div {
    line-height: 1.2em;
    font-size: 1em;
    color: black;
    transition: 0s 180s;
}

div:hover {
    line-height: 0;
    font-size: 0;
    color: transparent;
    transition: 0;
}

Dieser Code verwendet eine Kombination aus absoluter Positionierung, Deckkraft und Übergängen, um den gewünschten Effekt zu erzielen. Die Deckkraft ist zunächst auf 0 eingestellt, wodurch das Bild unsichtbar wird. Beim Schweben wird die Deckkraft auf 1 gesetzt, wodurch das Bild sichtbar wird. Um zu verhindern, dass der Inhalt beim „Unhover“ verschwindet, wird die Übergangseigenschaft mit einer Verzögerung von 180 Sekunden (3 Minuten) verwendet. Diese Verzögerung hemmt effektiv den Deckkraftübergang und hält das Bild auf unbestimmte Zeit sichtbar.

Alternativ ist es auch möglich, Fokusereignisse zu verwenden, um sicherzustellen, dass das Bild beim Klicken sichtbar bleibt:

div:hover img:focus {
   opacity: 0;
   transition: 3s;
   -webkit-transform: rotate(-360deg) scale(0.23);
   -webkit-transform: rotate(-360deg) scale(0.23);
   -moz-transform: rotate(-360deg) scale(0.23);
   -o-transform: rotate(-360deg) scale(0.23);
   -ms-transform: rotate(-360deg) scale(0.23);
   transform: rotate(-360deg) scale(0.23);
}

Dies Variante verwendet Fokusereignisse und Übergänge, um das Bild auszublenden und zu drehen, nachdem darauf geklickt wurde, sodass es während des Übergangs sichtbar bleibt.

Durch die Implementierung dieser CSS-Techniken Sie können das Verhalten des Hover-Status ändern, um die Sichtbarkeit des gewünschten Inhalts auch dann aufrechtzuerhalten, wenn der Mauszeiger den angegebenen Bereich verlässt.

Das obige ist der detaillierte Inhalt vonWie kann ich den CSS-Hover-Status beibehalten, nachdem die Maus das Element verlassen hat?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!