Set borders for mouse hover - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover Border

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Hover Border

Description

Set borders for mouse hover

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{<!--from www.  ja  v  a  2s  .  c o m-->
   list-style: none;
   border-top: 2px solid black;
   border-bottom: 2px solid black;
   overflow: hidden;
}
li{
   float: left;
   display: block;
}
a{
   padding: 12px 0;
   display: block;
   text-align: center;
}
a:hover{
   background: black;
}
.inner{
   border-right: 2px solid black;
}
ul:hover .inner {
   border-right: 2px solid transparent;
}


      </style> 
 </head> 
 <body> 
  <nav> 
   <ul> 
    <li class="span4"> <a href="/"> <span class="inner">Nav 1</span> </a> </li> 
    <li class="span4"> <a href="/"> <span class="inner">Nav 2</span> </a> </li> 
    <li class="span4"> <a href="/"> <span class="inner">Nav 3</span> </a> </li> 
   </ul> 
  </nav>  
 </body>
</html>

Related Tutorials