ホバーナビゲーションリンク - ロゴの変更

Question

ロゴヘッダーとその下に5つのリンクがメインナビゲーションとして表示されます。私は、メインのロゴ画像を、リンクが上がってくるたびにロゴの色のバリエーションで置き換えたいと思っています。したがって、リンクごとに5種類の色のロゴが表示されます。リンクをホバーすると、ロゴの色が変わるように見えます。

私は、ホバーイメージのために、イメージを表示するために別のイメージとホバーリンクを変更するための多くのソリューションを見つけていますが、それは私を助けるものではありません。

ご協力いただきますようお願い申し上げます。私はそれを行うだろう方法です

Answer 1

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

。