Next »
29/920
« Previous

Add border to anchor hover effect in HTML and CSS

Description

The following code shows how to add border to anchor hover effect.

Example


<html>
<head>
<!--  ww w  . j  ava2s  .c o m-->
<style type="text/css">

#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 id="pagespk">
<div id="navsite">
<h5>Site navigation:</h5>
<ul>
<li><a href="" id="linkhom">Home</a></li>
<li><a href="" id="linkabt">About</a></li>
<li><a href="" id="linkarh">Archives</a></li>
<li><a href="" id="linkwri">Writing</a></li>
<li><a href="" id="linkspk">Speaking</a></li>
<li><a href="" id="linkcnt">Contact</a></li>
</ul>
</div>
</body>
</html>

Click to view the demo

The code above generates the following result.

Add border to anchor hover effect in HTML and CSS
Next »
« Previous