Question

我有一个菜单，中间包含动画徽标链接，内部有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");  
    });

Answer 1

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

Answer 2

没有必要为此使用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

Answer 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仅在指针移出绑定元素时触发。

在鼠标悬停时更改.gif文件

3 个答案: