|
| |
| 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.java2java.com">Home</a></li>
<li><a href="http://www.java2java.com">About</a></li>
<li><a href="http://www.java2java.com">Archives</a></li>
<li><a href="http://www.java2java.com">Writing</a></li>
<li><a href="http://www.java2java.com">Speaking</a></li>
<li><a href="http://www.java2java.com">Contact</a></li></ul>
</div>
</div>
<div id="columnRight">
<img src="java2s.gif" width="100%" height="200">
<h2><a href="http://www.java2java.com">Heading</a></h2>
<p>Text <a href="http://www.java2java.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 | | | | 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 | | |
|