Changing .gif on mouseover

Question

I have a menu that contains an animated logo link at the center and 2 spans inside.

When the mouse is over the div ".menu", the .gif changes at the beginning. Then on mouseout the same div's image changes again.

But I have a problem : What I want is when a user places the cursor on ".menu", the gif changes for each menu item as well, at the beginning of the parent link on the menu.

I don't want that the .gif to change within the menu!

DEMO IN FIDDLE

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

Change .mouseover to .mouseenter, and change .mouseout to .mouseleave.

check out 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

There is no need to use jQuery for this.

When you can use css, use it! :]

Here is the changes I made and I believe this is what you want,

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

Try using the mouseenter and mouseleave events:

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

From the jQuery documentation:

The mouseleave event differs from mouseout in the way it handles event bubbling. ... The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant.

mouseout fires when the pointer moves out of child element as well, while mouseleave fires only when the pointer moves out of the bound element.