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

Does this answer your question? [CSS set background-image by data-image attr](https://stackoverflow.com/questions/26967890/css-set-background-image-by-data-image-attr) — Lars Flieger, Feb 05 '21 at 11:35

score 2 · Answer 1 · answered Feb 05 '21 at 13:51

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

score 0 · Answer 2 · answered Feb 05 '21 at 11:41

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

Display image when hovering over nav item

2 Answers2