悬停导航链接 - 更改徽标图像

时间:2011-08-03 18:13:53

标签: jquery css image hover

我有一个徽标标题,下面有5个链接作为主导航。每当链接悬停时,我想用徽标的颜色变化来替换主徽标图像。因此,每个链接将有5种不同的颜色标识。悬停链接,徽标似乎会改变颜色。

我找到了许多悬停图片的解决方案来更改另一张图片并悬停链接以显示图片,但没有什么能帮助我。

任何帮助将不胜感激!

1 个答案:

答案 0 :(得分:2)

$(".link").hover(function(){
  $("#header").attr("src","/images/"+$(this).attr("class").split(" ")[1]+"Logo.png");
},function(){
  $("#header").attr("src","/images/defaultLogo.png");
})


<a class="link red" href="home.htm">home</a>
<a class="link blue" href="products.htm">products</a>
<a class="link green" href="about.htm">about</a>
<a class="link yellow" href="contact.htm">contact</a>

我就是这样做的。