Question

我确信使用jquery这很简单，但我无法理解。我有一个网站加载时带有徽标的网站。当用户将鼠标悬停在某个导航链接上时，我想用不同的徽标交换该徽标。

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

有人能告诉我如何使用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

是的，您可以使用attr

使用jQuery

给一个班级。悬停名称应为myimage-hover.png

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

Answer 2

也许值得花时间检查精灵。

Answer 3

这将是一种方式：

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

<强> jsFiddle example

当我将鼠标悬停在特定导航链接上时，如何切换具有不同徽标的页面徽标

3 个答案: