CSS 轉換可以在沒有 JavaScript 的情況下延遲 :hover 效果嗎？

在CSS 中延遲:hover 效果

問題：

問題：

是否可以藉助延遲JavaScript 即可啟動CSS :hover 事件？具體來說，如何在模擬hoverIntent（一種流行的延遲懸停效果的jQuery插件）的功能時實現這一點？

答案：

div {
    transition: 0s background-color;
}

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

可以利用CSS轉換來延遲：懸停效果。下面是一個例子：

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>

這裡有一個更完整的演示其中包括懸停打開和關閉的延遲：

以上是CSS 轉換可以在沒有 JavaScript 的情況下延遲 :hover 效果嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！