Can CSS Transitions Delay :hover Effects Without JavaScript?

Delaying :hover Effects in CSS

Question:

Is it possible to delay the activation of the CSS :hover event without resorting to JavaScript? Specifically, how can this be achieved while simulating the functionality of hoverIntent, a popular jQuery plugin for delaying hover effects?

Answer:

CSS transitions can be leveraged to delay :hover effects. Here's an example:

div {
    transition: 0s background-color;
}

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

In this example, the background color of the element will not be changed to red until one second after the mouse hovers over it.

Here's a more complete demonstration that includes a delay on both hover on and off:

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>

The above is the detailed content of Can CSS Transitions Delay :hover Effects Without JavaScript?. For more information, please follow other related articles on the PHP Chinese website!