Javascript jquery中的鼠标事件问题

我创建了一个菜单，并尝试使用mouseover（mouseenter）和mouseout（mouseleave），但不幸的是，如果您移动鼠标太快，一些事件不会触发，悬停图像也不会更改回原始图像

我需要使用mouseover和mouseout事件，而不是悬停，因为如果单击图像，我需要显示原始图像

请通过以下网址查看演示：

---

您可以尝试使用鼠标悬停进行初始更改，然后单击“更改类或图像源”。

我认为每个图标使用两个不同的图像元素不是一个好主意

单象元 当mouseover和mouseout被激发时，应该为每个图标使用一个元素，并切换类和图像src

像这样（最简单的例子）：

工作小提琴：

用CSS精灵更新 下面是一个更好的CSS精灵示例。不需要JavaScript和大部分标记，只需要一些CSS：

.side_left {
    width: 60px;
    height: 60px;
    background: url('http://i.imm.io/mvRL.png');
}
.side_left:hover {
    background-position: 60px;
}

---

工作小提琴：

之所以发生这种情况，是因为您正在隐藏的项目上使用鼠标事件，因此当您移动足够快时，项目不在那里，无法触发鼠标移出事件

我稍微修改了原来的代码以使其工作，但是，您应该考虑删除两个图像标记，并使用jQuery在两个图像SRC属性值或CSS之间进行交换，或者使用纯CSS和：悬停选择器。

---

您只需使用css并根据JavaScript添加css类即可

我更新了你的提琴来告诉你，这将大大减少所需的JavaScript代码。 我保留了您现有的标记，但我认为这也可以用较少的标记完成：

---

如果将鼠标快速移动到，则没有给.side_left_hover元素足够的时间来开始收听鼠标

那么你如何修复它呢？我会将所有鼠标侦听器放在.side\u left/.side\u left\u hover容器div中。这也会使代码更简单、更干净

这是小提琴：

• 我使用了.on（）方法并列出了所需的鼠标事件
• 您可以附加一个事件处理程序

  （e）

  ，并在函数中检查它的类型

---

更好的是，你可以使用一个精灵图像作为css背景，只需在悬停时将背景位置更改为顶部或底部。非常感谢你提供了这个示例。对于这种类型的遍历，现在通常首选

parent

。@gnarf我最近在做一些PHP…：D

.side_left {
    width: 60px;
    height: 60px;
    background: url('http://i.imm.io/mvRL.png');
}
.side_left:hover {
    background-position: 60px;
}

$('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');
    }
});