CODEWITHSUNDEEP
jquerycssimagehover
Sofia
Sofia

Reputation: 1

Hover Navigation Link - Change Logo Image

I have a logo header and 5 links below it as main navigation. I want to substitue the main logo image with a color variation of the logo every time a link is hovered. So there would be 5 different color logos for each of the links. Hover a link and the logo would appear to change color.

I'm finding a lot of solutions for hover image to change another image and hover link to make an image appear, but nothing that's helping me.

Any help will be greatly appreciated!

Upvotes: 0

Views: 511

Answers (1)

Joseph Marikle
Joseph Marikle

Reputation: 78520

$(".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>

That's how I'd do it.

Upvotes: 2

Related Questions