Навигационная ссылка при наведении курсора - Изменить изображение логотипа

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>

Вот как бы я это сделал.