我创建了一个菜单并尝试使用mouseover(mouseenter)和mouseout(mouseleave),但不幸的是,如果您移动鼠标得太快,一些事件将不会触发,悬停图像也不会改回原始图像。
我需要使用mouseover和mouseout事件而不是hover,因为如果单击图像,我需要显示原始图像。
请在以下链接中查看演示: 演示链接
我需要使用mouseover和mouseout事件而不是hover,因为如果单击图像,我需要显示原始图像。
请在以下链接中查看演示: 演示链接
$(".side_left").mouseover(function() {
$(this).prop("src", "http://www.spiritualawakeningradio.com/yaha.jpg");
}).mouseout(function(){
$(this).prop("src", "http://img.creativemark.co.uk/uploads/images/461/13461/smallImg.png");
});
可运行的示例:演示
这是一个更好的使用CSS Sprites的示例。不需要JavaScript和大部分标记,只需要一些CSS:
.side_left {
width: 60px;
height: 60px;
background: url('http://i.imm.io/mvRL.png');
}
.side_left:hover {
background-position: 60px;
}
工作的代码示例:演示
(e)
并在函数内部检查其类型。.
$('img.side_left').parent('div').on('mouseenter mouseleave click', function(e){
if(e.type === 'mouseenter' || e.type==='mouseleave'){
$(this).find('img:not(.active)').toggle();
}else{ // IS CLICK
$('img.active').toggle().removeClass('active');
$(this).find('img').addClass('active');
}
});
.closest("div")
来进行此类遍历,而不是使用parent
。 - gnarf