Add border to anchor when hover

Add border to anchor when hover : Anchor class : Basic Tags HTML CSS TUTORIALS

HTML CSS TUTORIALS » Basic Tags » Anchor class »

Add border to anchor when hover


 




<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title></title>

<style type="text/css">
    body
    {
      margin: 0;
      padding: 0;
      color: #000;
      width: 600px;
      border-right: 1px solid black;
    }

    #frame
    {
      margin: 0;
    }

    #header
    {
      background-color: #666;
      border-bottom: 1px solid #333;
    }

    #header h1 {
      margin: 0;
      padding: .5em;
      color: white;
    }

    #columnLeft {
      float: left;
      width: 160px;
      margin-left: 10px;
      padding-top: 1em;
    }

    #columnLeft p {
      margin-top: 0;
    }

    #columnRight
    {
      padding-top: 1em;
      margin: 0 2em 0 200px;
    }

    #columnRight h2 {
      margin-top: 0;
    }

    #footer
    {
      clear: both;
      background-color: #ccc;
      padding-bottom: 1em;
      border-top: 1px solid #333;
      padding-left: 200px;
    }

#navsite h5 {
  display: none;
}

#navsite {
 font-size: 0.7em;
 font-weight: bold;
 width: 125px;
 border-right: 1px solid #666;
 padding: 0 0 0 0;
 margin-bottom: 1em;
}

#navsite ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

#navsite ul li {
 margin: 0;
}

#navsite ul li a:link {
 display: block;
 padding: 2px 2px 2px 0.5em;
 border-left: 10px solid #369;
 border-right: 1px solid #69c;
 border-bottom: 1px solid #369;
 background-color: #036;
 color: #fff;
 text-decoration: none;
 width: 100%;
}

html>body #navsite ul li a {
 width: auto;
}

#navsite ul li a:hover {
 border-left: 10px solid #036;
 border-right: 1px solid #69c;
 border-bottom: 1px solid #369;
 background-color: #69f;
 color: #fff;
}

</style>
</head>
<body>

<div id="frame">
  <div id="header">
    <h1>Title</h1>
  </div>
  <div id="columnLeft">
    <p>
      Text
    </p>

<div id="navsite">

    <h5>Site Navigation:</h5>

  <ul>
   <li><a href="http://www.navioo.com">Home</a></li>
   <li><a href="http://www.navioo.com">About</a></li>
   <li><a href="http://www.navioo.com">Archives</a></li>
    <li><a href="http://www.navioo.com">Writing</a></li>
   <li><a href="http://www.navioo.com">Speaking</a></li>
   <li><a href="http://www.navioo.com">Contact</a></li></ul>

  </div>

  </div>
  <div id="columnRight">
<img src="java2s.gif" width="100%" height="200">

<h2><a href="http://www.navioo.com">Heading</a></h2>

<p>Text <a href="http://www.navioo.com">Link</a></p>

<p>Text.</p>

  </div>
  <div id="footer">
    <p>Copyright 2003</p>
  </div>
</div>


</body>
</html>