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:

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

}
div:hover {

background-color: red;

}

Diese Demonstration zeigt ein div-Element mit einem verzögerten Hover-Effekt bei der Änderung der Hintergrundfarbe, der angibt, wie Sie Übergänge nutzen können, um Hover-Effekte in CSS zu verzögern.

Das obige ist der detaillierte Inhalt vonWie kann ich :hover-Effekte in CSS ohne JavaScript verzögern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!