jquery 的鼠标事件问题

Mouse events issue with jquery

本文关键字：问题 事件 鼠标 jquery      更新时间：2023-09-26

我创建了一个菜单，我尝试使用鼠标悬停（鼠标输入）和鼠标退出（鼠标离开），但不幸的是，如果您移动鼠标太快，某些事件不会触发，悬停图像也不会更改回原始图像。

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

请在以下位置查看演示：演示链接

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

单个图像元素

您应该为每个图标使用一个元素，并在触发鼠标悬停和鼠标退出时切换类和图像 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");
 });

工作小提琴：演示

使用 CSS 精灵进行更新

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

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

工作小提琴：演示

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

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

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

http://jsfiddle.net/MATMD/

你可以使用 css 并为每个 JavaScript 添加 css 类来做到这一点。

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

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

如果将

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

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

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

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');
    }
});
相关文章：