How Do I Swap Page Logo With Different Logo When Hovering Over Specific Nav Links

Question

I'm sure this is fairly simple using jquery, but I cannot figure it out. I have a site with logo that is present when the site loads. I want to swap that logo with a different logo when the user hovers over a certain navigation link.

When hovering over the "com" link, I want to swap the site logo for a different one.

Can someone tell me how to accomplish this with jquery.

<div>
<div id="logo"><img src="myimage.png"></div>
<div id="menu">
     <ul>
       <li><a href="#">res</a></li>
       <li><a href="#">com</a></li>

    </ul>
</div>
</div>

Answer 1

Yes you can do it with jQuery using attr

Give res a class. The hover name should be myimage-hover.png

$(function () {
    $('a.res').hover( function () {
        $(.logo img).attr('src', $(.logo img).attr('src').replace(/\.png/, '-hover.png') );
    });
});

Answer 2

您可能还需要花费时间来检查精灵。

Answer 3

This would be one way:

$('a:contains("com")').mouseover(function(){
    $('#logo img').prop('src','http://www.placekitten.com/100/100')
});

jsFiddle example