CSS 转换可以在没有 JavaScript 的情况下延迟 :hover 效果吗？-css教程-PHP中文网

CSS 转换可以在没有 JavaScript 的情况下延迟 :hover 效果吗？

Mary-Kate Olsen

发布： 2024-11-29 16:59:10

原创

312 人浏览过

Can CSS Transitions Delay :hover Effects Without JavaScript?

在 CSS 中延迟 :hover 效果

问题：

是否可以延迟不借助 JavaScript 即可激活 CSS :hover 事件？具体来说，如何在模拟hoverIntent（一种流行的延迟悬停效果的jQuery插件）的功能时实现这一点？

答案：

可以利用CSS过渡来延迟：悬停效果。下面是一个例子：

div {
    transition: 0s background-color;
}

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

登录后复制

在这个例子中，元素的背景颜色直到鼠标悬停在元素上一秒后才会变成红色。

这里有一个更完整的演示其中包括悬停打开和关闭的延迟：

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中文网其他相关文章！