悬停在导航项上时显示图像

Question

For each nav item I have in my navigation, I want a different image displayed next to it on hover. I tried setting a data-image attribute to the background image of my div, but found out later this solution won't work. And I don't want to use classes to display the different images.

Is there a JavaScript solution to dynamically change an image? Like can you put attributes with image paths on the nav items and check with JS what image to display on hover?

This is what I've tried:

<div class="navbar__menu__menu">
    <a class="navbar__menu__item" data-image="url(/img/menu/menu-image-1.jpg)">Home</a>
    <a class="navbar__menu__item" data-image="url(/img/menu/menu-image-2.jpg)">Work</a>
    <a class="navbar__menu__item" data-image="url(/img/menu/menu-image-3.jpg)">About</a>
    <a class="navbar__menu__item" data-image="url(/img/menu/menu-image-4.jpg)">Contact</a>
    <div class="navbar__menu__image"></div>
</div>

.navbar__menu__image {
    height: 80vh;
    width: 25vw;
    background-image: attr(data-image);
    position: absolute;
}

Answer 1

You could try something like this if you want to handle this without JavaScript.

HTML

<div class="navbar__menu__menu">
    <a class="navbar__menu__item">Home<div><img src="/img/menu/menu-image-2.jpg" /></div></a>
</div>

CSS

a>div { 
    display: none; 
}
a:hover>div { 
    display: block; 
}

Answer 2

I think with out different class name is hard to achieve

by with adding different class name you can achieve with JavaScript or jquery by add class or toggle class functionality

jquery example:

 $(".classname").hover(function () {
     $(this).toggleClass("result_hover");
 });