javascript - Display image when hovering over nav item

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;
}

question from:https://stackoverflow.com/questions/66062289/display-image-when-hovering-over-nav-item

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; 
}