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

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 >
        <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?

CodePudding user response：

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

CodePudding user response：

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