标签 javascript jquery html css hover
<分区>
我想通过 jQuery 在 anchor 标记上禁用悬停事件一段时间。
示例:我有一些 CSS 样式用于 anchor () 元素上的悬停效果。当我悬停该元素时，我希望它等待一定时间(500 毫秒左右)，然后开始渲染悬停效果。
也许是这样的？
$("#navigation").hover(function () {
$("li.has-submenu").off('hover');
setTimeout(function () {
$("li.has-submenu").on('hover');
}, 1000);
});
最佳答案
我最近查了一下，现在是 2015 年，这意味着你可以为此使用 CSS3。
以下将在 500 毫秒后开始为所有链接设置动画背景色。
不需要 jQuery 或任何 JavaScript。
a {
-webkit-transition: all 500ms ease-in;
-moz-transition: all 500ms ease-in;
-ms-transition: all 500ms ease-in;
-o-transition: all 500ms ease-in;
transition: all 500ms ease-in;
}
a:hover {
background-color: #c00;
transition-delay: 500ms;
}<a href="">Hover me</a>但是，如果您绝对需要使用 JavaScript 执行此操作，则可以使用 setTimeout 将悬停类应用于元素:
jQuery(function($) {
$("a").hover(function() {
var el = $(this);
var timeout = setTimeout(function() {
el.addClass("hover");
}, 500);
el.data("timeout", timeout);
}, function() {
clearTimeout($(this).removeClass("hover").data("timeout"));
});
});a {
-webkit-transition: all 500ms ease-in;
-moz-transition: all 500ms ease-in;
-ms-transition: all 500ms ease-in;
-o-transition: all 500ms ease-in;
transition: all 500ms ease-in;
}
a.hover {
background-color: #c00;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="">Hover me</a>关于javascript - 在一定时间后启用悬停事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31207119/