Können CSS-Übergänge :hover-Effekte ohne JavaScript verzögern?

Verzögern von :Hover-Effekten in CSS

Frage:

Ist es möglich, die zu verzögern Aktivierung des CSS-Ereignisses :hover ohne Rückgriff auf JavaScript? Wie kann dies konkret erreicht werden, während gleichzeitig die Funktionalität von hoverIntent simuliert wird, einem beliebten jQuery-Plugin zur Verzögerung von Hover-Effekten?

Antwort:

CSS-Übergänge können zur Verzögerung genutzt werden :Hover-Effekte. Hier ist ein Beispiel:

div {
    transition: 0s background-color;
}

div:hover {
    background-color: red;
    transition-delay: 1s;
}

In diesem Beispiel wird die Hintergrundfarbe des Elements erst eine Sekunde nach dem Bewegen der Maus darüber in Rot geändert.

Hier ist eine ausführlichere Demonstration Dazu gehört eine Verzögerung beim Ein- und Ausschalten des Schwebeflugs:

div {
    display: inline-block;
    padding: 5px;
    margin: 10px;
    border: 1px solid #ccc;
    transition: 0s background-color;
    transition-delay: 1s;
}

div:hover {
    background-color: red;
}

<div>delayed hover</div>

Das obige ist der detaillierte Inhalt vonKönnen CSS-Übergänge :hover-Effekte ohne JavaScript verzögern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!