使用jQuery时出现的鼠标事件问题

Question

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

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

请在以下链接中查看演示： 演示链接

- glarkou

Answer 1

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

单个图像元素

您应该为每个图标使用一个元素，并在鼠标移入和移出时切换类和图像源。

最小示例如下：

 $(".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更新

这是一个更好的使用CSS Sprites的示例。不需要JavaScript和大部分标记，只需要一些CSS：

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

工作的代码示例：演示

- Alp

---

更好的方案是，您可以使用一个CSS背景的精灵图像，并在悬停时只需更改背景位置到顶部或底部。 - Michał Miszczyszyn

Answer 2

你可以尝试使用hover来进行初始更改，然后在onclick事件中更改类或图像源。

- davids

Answer 3

这是因为您正在对变为隐藏状态的项目使用鼠标事件，所以当您移动速度足够快时，该项目不存在触发mouseout事件。

我稍微修改了您的原始代码使其运行，但您应该考虑放弃两个图像标记并在两个图像src属性值或CSS之间使用jQuery进行交换，或者使用纯CSS和:hover选择器。

http://jsfiddle.net/MATMD/

- moribvndvs

Answer 4

你可以使用CSS，并通过JavaScript添加CSS类来实现这一点。

我更新了你的fiddle，以展示这一点，这将显著减少所需的JavaScript代码。 虽然我保留了你现有的标记，但我认为这也可以用更少的标记完成：

http://jsfiddle.net/3YBe4/12/

- GNi33

Answer 5

如果你移动鼠标太快，就没有给.side_left_hover元素足够的时间开始监听鼠标。

那么怎么解决呢？我会把所有的鼠标监听器放在.side_left/.side_left_hover容器div中。这也会使你的代码更简单、更清晰。

这是Fiddle链接：http://jsfiddle.net/rJK3R/1/

- Theron Luhn

Answer 6

jsFiddle演示

• 我使用了.on()方法并列出了所需的鼠标事件。
• 然后，您可以附加一个事件处理程序(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');
    }
});

- Roko C. Buljan

---

非常感谢您提供的这个示例。 - glarkou

现在通常更倾向于使用.closest("div")来进行此类遍历，而不是使用parent。 - gnarf

@gnarf 最近我在写PHP...:D - Roko C. Buljan