CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Giuseppe De Paola
Giuseppe De Paola

Reputation: 41

Change background of one <li> when hover another <li>

i have a problem (i haven't enought knowledge to do that - this is the real problem): I have a dropdown menu inside a website: [SCREENSHOT]

And i want, that when i'm inside the last list of item, the icon on the first list change background color.

This is the code explained

<!-- "Product" menu, (you can see it in the screenshot) is inside a li:-->

 <li><a href="#">Product</a></li>

 <!-- Then there are the sub menu: -->

 <li><a href="#">Product</a>
   <ul>
     <li><a href="#"><img src="icon1.png">sub1</a></li>
     <li><a href="#"><img src="icon1.png">sub2</a></li>
     <li><a href="#"><img src="icon1.png">sub3</a></li>
     <li><a href="#"><img src="icon1.png">sub4</a></li>
  </ul>
</li>

 <li><a href="#">Product</a>
   <ul>
     <li><a href="#"><img src="icon1.png">sub1</a>
       <ul>
         <li>
         <a href="page.html">SUBOFSUB!!!!!</a>
         </li>
       </ul>
     </li>
     <li><a href="#"><img src="icon1.png">sub2</a></li>
     <li><a href="#"><img src="icon1.png">sub3</a></li>
     <li><a href="#"><img src="icon1.png">sub4</a></li>
  </ul>
</li>

And i want to change the background of the img of "sub1,sub2,sub3,sub4" every time i get hover of the "SUBOFSUB!!" menu

Upvotes: 0

Views: 91

Answers (1)

Shaggy
Shaggy

Reputation: 6796

As "SUBOFSUB" is a descendant of "sub1", you can achieve what you want by applying your desired styles to the :hover pseudo-class of the "sub1" element, like so:

/* HOUSEKEEPING */
*{box-sizing:border-box;font-family:sans-serif;list-style:none;margin:0;padding:0;}
/* IMPORTANT STUFF */
#menu>li:hover>img{
  background:#fff;
}
/* STYLING */
#menu{color:#fff;line-height:1.5em;width:50%;}
#menu>li{background:#000;margin:1px 5px;padding:0 5px;position:relative;}
#menu img{border:1px solid;height:1em;margin:.25em 5px .25em 0;transition:background .5s;vertical-align:top;width:1em;}
#menu ul{background:#fff;left:90%;position:absolute;top:5px;width:100%;}
#menu ul li{background:#666;margin:1px;padding:0 5px;}
<ul id="menu">
  <li><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">Menu 1
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </li>
</ul>

Upvotes: 1

Related Questions