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.java2s.com">Home</a></li>
   <li><a href="http://www.java2s.com">About</a></li>
   <li><a href="http://www.java2s.com">Archives</a></li>
    <li><a href="http://www.java2s.com">Writing</a></li>
   <li><a href="http://www.java2s.com">Speaking</a></li>
   <li><a href="http://www.java2s.com">Contact</a></li></ul>

  </div>

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

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

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

<p>Text.</p>

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


</body>
</html>

Related examples in the same category

1.	Pseudo-class Selectors for anchor
2.	a:link
3.	a:visited
4.	a:hover
5.	a:active
6.	Link visited hover
7.	link visited, hover, active
8.	link visited, hover, active, focus
9.	Set anchor hover in under which are in a
10.	Set anchor link and visited: a:link, a:visited
11.	Set different color for anchor link and visited link
12.	Set color for anchor link, anchor visited, hover and active
13.	Set different anchor link style for navigation and content
14.	style for email anchor,
15.	Three level nesting for anchor link style setting
16.	Three level nesting for visited link style setting
17.	Three level nesting for visited link style setting for two
18.	Three level nesting for an anchor with id
19.	background image, repeat and position for anchor link hover
20.	background image, repeat and position for anchor link active
21.	Use anchor hover to highlight more than one tags
22.	a[href^='http://']:hover
23.	Rollover with image
24.	Set cursor for a link
25.	Anchor background-color: blue;
26.	Anchor background-position: top left;
27.	Anchor background-repeat: no-repeat;
28.	Anchor height: 35px;
29.	Anchor display: block;
30.	Anchor float: left;
31.	Anchor font-family: Arial, Helvetica, sans-serif;
32.	Anchor font-size: 12px;
33.	Anchor color: red;
34.	Anchor text-decoration: none;
35.	Anchor text-align: center
36.	Anchor color: #FCEACE;

Add border to anchor when hover : Anchor class « Tags « HTML / CSS

Related examples in the same category