Css hover over li, blur all others - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover on list

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Hover on list

Description

Css hover over li, blur all others

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">
ul:hover li {
   text-shadow:0px 0px 4px black;<!--from w  w w  .  ja va2 s.  c  om-->
   color:Chartreuse;
}

ul:hover li:hover {
   text-shadow:none;
   color:yellow;
}
</style> 
 </head> 
 <body> 
  <ul> 
   <li>L</li> 
   <li>L</li> 
   <li>L</li> 
   <li>L</li> 
   <li>L</li> 
  </ul>  
 </body>
</html>

Related Tutorials