Wie kann ich :hover-Effekte in CSS ohne JavaScript verzögern?

Verzögern von :hover-Effekten in CSS

Können Sie ein :hover-Ereignis verzögern, ohne JavaScript zu verwenden?

Es ist möglich, die Anwendung von Hover-Effekten in CSS durch die Verwendung zu verzögern Übergänge.

So verzögern Sie einen :hover-Effekt mithilfe von Übergängen:

Bedenken Sie den folgenden CSS-Code:

div {
    transition: 0s background-color;
}

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

In diesem Beispiel ist der Die Eigenschaft „Übergangsverzögerung“ ist auf 1 Sekunde festgelegt. Dies führt dazu, dass die Änderung der Hintergrundfarbe um 1 Sekunde verzögert wird, wenn der Schwebezustand erreicht wird.

Beispiel:

<div>delayed hover</div>

Visuelle Demonstration:

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">display:inline-block;
padding:5px;
margin:10px;
border:1px solid #ccc;
transition: 0s background-color;
transition-delay:1s;

background-color: red;