Change css property of all the other elements li of ul on hovering - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover to change

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Hover to change

Description

Change css property of all the other elements li of ul on hovering

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
#list {<!--  ww  w . j av a 2  s  .  c o m-->
   background-color:Chartreuse;
   list-style-type:none;
   padding:0;
}

#list:hover {
   background-color:yellow;
}

.element:hover {
   background-color:blue;
}
</style> 
 </head> 
 <body> 
  <ul id="list"> 
   <li class="element">Lorem ips</li> 
   <li class="element">Lorem ips</li> 
   <li class="element">Lorem ips</li> 
   <li class="element">Lorem ips</li> 
  </ul>  
 </body>
</html>

Related Tutorials