How to make different img appear when hovering over a different li - html

Question

im trying to make the background of a parent div change when hovering over a li in its child.. i did that but now i want to display a different img when hovering over a different li inside the same child div... i cant seem to do that and cant find anyone else having the same problem.. and if it needs JavaScript also i dont mind
i tried to specify the li but it doesnt work
heres the css code
#mainpage{
pointer-events: none;
}
#listman {
pointer-events: auto;
}
#mainpage:hover {
background: url("bg1.jpg");
background-repeat: no-repeat;
height: 500x;
background-position: top;
background-size: 100%;
}
and heres the html part
div id="mainpage">
<div id="listman">
<ul class="bigger">
<li id="listman1" href="#"> <a> 1 </a> </li>
<li id="listman2" href="#"> <a> 2 </a> </li>
<li id="listman3" href="#"> <a> 3 </a> </li>
<li id="listman4" href="#"> <a> 4 </a> </li>
<li id="listman5" href="#"> <a> 5 </a> </li>
<li id="listman6" href="#"> <a> 6 </a> </li>
<li id="listman7" href="#"> <a> 7 </a> </li>
<li id="listman8" href="#"> <a> 8 </a> </li>
</ul>
</div>
</div>
</div>
i want to make a different img to appear when hovering over (listman2) can anyone help me?

Answer 1

Try using this CSS syntax:
div#listman > ul.bigger > div#listman2 > li {
background-image: url("bg1.png");
}
div#listman > ul.bigger > div#listman2 > li:hover + div#listman > ul.bigger > div#listman2 > li {
background-image: url("bg2.png");
}
I'm not sure it will work though

Answer 2

If the li elements do not have their own position and you can make mainpage be the closest positioned element to them then you can put the image on an absolutely positioned pseudo element on each li when it is hovered.
This snippet uses a CSS variable to set the background image for each li element.
#mainpage {
pointer-events: none;
}
#listman {
pointer-events: auto;
}
ul.bigger {
position: relative;
}
li:hover::after {
content: '';
position: absolute;
background: var(--bg);
background-repeat: no-repeat;
background-position: top;
background-size: 100%;
width: 100%;
height: 500px;
z-index: -1;
top: 0;
left: 0;
}
#listman1 {
--bg: url(https://picsum.photos/id/1015/1024/768);
}
#listman2 {
--bg: url(https://picsum.photos/id/1016/1024/768);
}
#listman3 {
--bg: url(https://picsum.photos/id/1018/1024/768);
}
#listman4 {
--bg: url(https://picsum.photos/id/1019/1024/768);
}
#listman5 {
--bg: url(https://picsum.photos/id/1020/1024/768);
}
#listman6 {
--bg: url(https://picsum.photos/id/1022/1024/768);
}
#listman7 {
--bg: url(https://picsum.photos/id/1023/1024/768);
}
#listman8 {
--bg: url(https://picsum.photos/id/1024/1024/768);
}
<div id="mainpage">
<div id="listman">
<ul class="bigger">
<li id="listman1" href="#"> <a> 1 </a> </li>
<li id="listman2" href="#"> <a> 2 </a> </li>
<li id="listman3" href="#"> <a> 3 </a> </li>
<li id="listman4" href="#"> <a> 4 </a> </li>
<li id="listman5" href="#"> <a> 5 </a> </li>
<li id="listman6" href="#"> <a> 6 </a> </li>
<li id="listman7" href="#"> <a> 7 </a> </li>
<li id="listman8" href="#"> <a> 8 </a> </li>
</ul>
</div>
</div>