jquery的鼠标事件问题

Question

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

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

请在以下位置查看演示： Demo link

Answer 1

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

单个图像元素

您应该为每个图标使用一个元素，并在触发 mouseover 和 mouseout 时切换类和图像 src。

像这样（最小的例子）：

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

工作小提琴：DEMO

用 CSS 精灵更新

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

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

工作小提琴：DEMO

Answer 2

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

Answer 3

发生这种情况是因为您在隐藏的项目上使用了鼠标事件，因此当您移动得足够快时，该项目不会触发 mouseout 事件。

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

http://jsfiddle.net/MATMD/

Answer 4

您可以只使用 css 并为每个 JavaScript 添加 css-classes 来做到这一点。

我更新了您的小提琴以向您展示，这将显着减少所需的 JavaScript 代码。 我保留了您现有的标记，但我认为这也可以用更少的标记来完成：

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

Answer 5

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

那么你如何解决它？我会将所有鼠标侦听器放在 .side_left/.side_left_hover 容器 div 中。这也将使您的代码更简单、更清晰。

这是小提琴：http://jsfiddle.net/rJK3R/1/

Answer 6

jsFiddle demo

• 我使用了 .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');
    }
});