Navigation bar hover to highlight background - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover to change Color

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

Description

Navigation bar hover to highlight background

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">
#nav ul<!-- ww  w .  j a v a 2s .  c om-->
 {
   list-style-type:none;
   margin:0;
   padding:0;
   overflow:hidden;
}

#nav ul li
 {
   float:left;
}

#nav a:link,a:visited
 {
   display:block;
   width:164.3px;
   height:36px;
   font-weight:bold;
   color:Chartreuse;
   background-color:yellow;
   text-align:center;
   text-decoration:none;
   text-transform:uppercase;
   line-height:36px;
}

#nav ul li a:hover
 {
   background-color:blue;
}

.lightbox a {
   border:4px solid pink;
   display:block;
   float:left;
   margin:11px;
}

.lightbox a img {
   margin:4px;
}

.lightbox a:hover {
   border:4px solid OrangeRed;
}

.lightbox img {
   display:block;
}
</style> 
 </head> 
 <body> 
  <div id="nav"> 
   <ul> 
    <li> <a href="#home">Lore</a> </li> 
    <li> <a href="#news">Lorem ip</a> </li> 
    <li> <a href="#contact">Lorem</a> </li> 
    <li> <a href="#about">Lorem i</a> </li> 
    <li> <a href="#about">Lorem ipsu</a> </li> 
   </ul> 
  </div> 
  <div class="lightbox"> 
   <a href="https://www.java2s.com/style/demo/Firefox.png" rel="lightbox[group]"> <img src="https://www.java2s.com/style/demo/Google-Chrome.png"> </a> 
   <a href="https://www.java2s.com/style/demo/Safari.png" rel="lightbox[group]"> <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> </a> 
   <a href="https://www.java2s.com/style/demo/Google-Chrome.png" rel="lightbox[group]"> <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> </a> 
   <a href="https://www.java2s.com/style/demo/Google-Chrome.png" rel="lightbox[group]"> <img src="https://www.java2s.com/style/demo/Safari.png"> </a> 
   <a href="https://www.java2s.com/style/demo/Google-Chrome.png" rel="lightbox[group]"> <img src="https://www.java2s.com/style/demo/Safari.png"> </a> 
   <a href="https://www.java2s.com/style/demo/Firefox.png" rel="lightbox[group]"> <img src="https://www.java2s.com/style/demo/Opera.png"> </a> 
  </div>  
 </body>
</html>

Related Tutorials