javascript - 将鼠标悬停在特定导航链接上时如何使用不同的 Logo 交换页面 Logo

Question

我确信这使用 jquery 相当简单，但我无法弄明白。我有一个带有 Logo 的网站，该网站加载时会出现。当用户将鼠标悬停在某个导航链接上时，我想将该 Logo 与不同的 Logo 交换。

当鼠标悬停在“com”链接上时，我想将网站 Logo 换成另一个。

谁能告诉我如何用 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

是的，你可以用 jQuery 使用 attr 来做到这一点

给res一个类。悬停名称应为 myimage-hover.png

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