在鼠标悬停时更改 .gif答案

【问题标题】：Changing .gif on mouseover在鼠标悬停时更改 .gif
【发布时间】：2014-01-20 01:43:02
【问题描述】：

我有一个菜单，其中包含一个位于中心的动画徽标链接，内部有 2 个跨度。

当鼠标悬停在 div ".menu" 上时，.gif 会在开头发生变化。然后在 mouseout 上，同一个 div 的图像再次发生变化。

但我有一个问题：我想要的是当用户将光标放在“.menu”上时，每个菜单项的 gif 也会在菜单上父链接的开头发生变化。

我不希望 .gif 在菜单中更改！

$(".menu")
.mouseover(function() {   
    $(".logo img").attr("src", "http://www.makingdifferent.com/wp-content/uploads/2013/03/123.gif");  
});

$(".menu").mouseout(function() {   
    $(".logo img").attr("src", "http://www.thisiscolossal.com/wp-content/uploads/2012/07/rrrrroll01.gif");  
    });

【问题讨论】：

你能展示你的 HTML 吗？鼠标移出是正确的，您只需将其放在不同的元素上即可。
您可以在我上面发布的 DEMO IN FIDDLE 链接中看到 HTML。

标签： jquery css mouseover gif attr

【解决方案1】：

没有必要为此使用 jQuery。

当你可以使用 css 时，使用它！ :]

这是我所做的更改，我相信这就是您想要的，

HTML：

<span class="logo"><a class="gif" href="#"></a></span>

CSS：

.gif {
    height:50px;
    width: 50px;
    background-image: url("http://www.thisiscolossal.com/wp-content/uploads/2012/07/rrrrroll01.gif");
    background-size: 100% 100%;
    display: block;
}

.menu:hover .gif {
    background-image: url("http://www.makingdifferent.com/wp-content/uploads/2013/03/123.gif");    
}

JSFIDDLE：fiddle

【讨论】：

是的，但我希望 gif 从头开始。
如果您需要这个，请参考您问题的任何其他答案，这是我用mouseenter/mouseleave 制作的小提琴：jsfiddle.net/kYTkj/12。

【解决方案2】：

将.mouseover 更改为.mouseenter，并将.mouseout 更改为.mouseleave。

查看fiddle

$(".menu")
.mouseenter(function() {   
    $(".logo img").attr("src", "http://www.makingdifferent.com/wp-content/uploads/2013/03/123.gif");  
});

$(".menu").mouseleave(function() {   
    $(".logo img").attr("src", "http://www.thisiscolossal.com/wp-content/uploads/2012/07/rrrrroll01.gif");  
    });

【讨论】：

【解决方案3】：

尝试使用mouseenter 和mouseleave 事件：

$(".menu").mouseenter(function() {   
    $(".logo img").prop("src", "http://www.makingdifferent.com/wp-content/uploads/2013/03/123.gif");  
}).mouseleave(function() {   
    $(".logo img").prop("src", "http://www.thisiscolossal.com/wp-content/uploads/2012/07/rrrrroll01.gif");  
});

来自 jQuery 文档：

mouseleave 事件与 mouseout 处理事件冒泡的方式不同。 ...另一方面，mouseleave 事件仅在鼠标离开它所绑定的元素而不是后代元素时触发其处理程序。

mouseout 也会在指针移出子元素时触发，而mouseleave 仅在指针移出绑定元素时触发。

【讨论】：