我对div列表有悬停效果,css为:
.product:hover {
background-color: #f6f6f7;
border-left-color: #f6f6f7 !important;
border-right-color: #f6f6f7 !important;
outline: 10px solid #f6f6f7;
z-index: 1;
}
我希望当用户滚动页面时不会触发此悬停效果,以免强制浏览器重新绘制/重排。
所以我试过了:
doc = $(document)
doc.scroll(->
$('.product').unbind('mouseenter').unbind('mouseleave')
)
但它似乎不起作用,当我滚动悬停效果仍然被触发。知道为什么吗?或者我是如何实现这一目标的?
答案 0 :(得分:2)
在您的css样式页面中添加此内容
.disable-hover {
pointer-events: none;
}
您需要做的是在开始滚动时将.disable-hover类添加到正文。然后,这允许用户光标穿过正文,从而禁用任何悬停效果。
var body = document.body,timer;
window.addEventListener('scroll', function() {
clearTimeout(timer);
if(!body.classList.contains('disable-hover')) {
body.classList.add('disable-hover')
}
timer = setTimeout(function(){
body.classList.remove('disable-hover')
},500);
}, false);
添加此脚本并执行它将起作用: -
答案 1 :(得分:0)
CSS hover与JavaScript事件无关。
如果你想做你想做的事,你需要通过添加/删除一个onscroll类来完成它
var scrollTimer;
$(window).on("scroll", function() {
if(scrollTimer) window.clearTimeout(scrollTimer);
$("body").removeClass("effect");
scrollTimer = window.setTimeout( function()
$("body").removeClass("effect");
}, 100);
});
和CSS
.effect .product:hover {
background-color: #f6f6f7;
border-left-color: #f6f6f7 !important;
border-right-color: #f6f6f7 !important;
outline: 10px solid #f6f6f7;
z-index: 1;
}
和PS:使用重要的是BAD练习
答案 2 :(得分:0)