title: Changing .gif on mouseover
body: <p>I have a menu that contains an animated logo link at the center and 2 spans inside.</p>
  
  <p>When the mouse is over the div ".menu", the .gif changes at the beginning.
  Then on <em>mouseout</em> the same div's image changes again.</p>
  
  <p>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.</p>
  
  <p>I don't want that the .gif to change within the menu!</p>
  
  <p><strong><a href="http://jsfiddle.net/kYTkj/7/" rel="nofollow">DEMO IN FIDDLE</a></strong></p>
  
  <pre><code>$(".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");  
      });
  </code></pre>