Highlight whole block when mouse hovers on it in css - 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

Highlight whole block when mouse hovers on it in css

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">
#navBar {<!--from w ww.j a v a  2  s.  co m-->
   float:right;
   background:Chartreuse;
}

#navBar ul {
   padding:0;
   margin:0;
   list-style:none;
   position:relative;
}

#navBar ul li {
   display:block;
   float:left;
}

#navBar ul li a {
   display:block;
   padding:5px;
   padding-left:14px;
   padding-right:14px;
   color:yellow;
   text-decoration:none;
   line-height:43px;
}

#navBar ul li a:hover {
   color:blue;
   text-decoration:underline;
   background:pink;
}
</style> 
 </head> 
 <body> 
  <div id="navBar"> 
   <ul> 
    <li> <a href="#">Lorem i</a> </li> 
    <li> <a href="#">Lorem i</a> </li> 
    <li> <a href="#">Lorem i</a> </li> 
    <li> <a href="#">Lorem i</a> </li> 
   </ul> 
  </div>  
 </body>
</html>

Related Tutorials