如果 div 是否悬停,我正在尝试实现循环浏览图像的效果。
如果 mouseenter div 然后循环显示图像
如果 mouseleave div 则停止循环浏览图像并删除所有图像(只有背景图像可见)。
目前我正在使用 setTimeout 递归地触发自身,但我在使用 jquery 检测鼠标是悬停还是离开对象时遇到了问题。
function logoImageLoop() {
$(".one-box .social_gallery .social_img:first").show().next(".social_img").hide().end().appendTo(".one-box .social_gallery");
};
var oneBoxIsHover = false;
$(".one-box").mouseenter(function(){
timeout();
function timeout() {
setTimeout(function(){
logoImageLoop();
timeout();
}, 100);
};
});
这是一个代码笔供引用:http://codepen.io/H0BB5/pen/xEpqbv
将鼠标悬停在本网站上的 cargo Logo 时可以看到我试图实现的类似效果:http://cargocollective.com/
最佳答案
你只需要在 mouseleave 上清除计时器。
var timer = null;
$(".one-box").mouseenter(function(){
timeout();
function timeout() {
timer = setTimeout(function(){
logoImageLoop();
timeout();
}, 100);
};
}).mouseleave(function(){
clearTimeout(timer);
});
关于javascript - 如何检测 mouseenter 或 mouseleave,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39878137/