|
| |
| Use anchor hover to highlight more than one tags |
|
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.outer {float:left;width:200px}
.container {
position:relative;
width:200px;
border:1px solid #000;
text-align:center;
}
.test1,.test2 {
margin-top:145px;
width:200px;
text-align::center;
}
.block1,.block2 {
display:block;
position:absolute;
width:200px;
height:15px;
background:#CCC;
}
.block1 {
top:120px;
left:0px;
}
.block2 {
top:5px;
left:0px;
width:155px;
height:102px;
}
.test1 a span.block2 {border:1px solid #fff}
.test1 a {border:1px solid #fff;background:#fff}
.test1 a:hover {color:red;background:#fffffc}
.test1 a:hover span.block1 {background:orange;}
.test1 a:hover span.block2 {border:1px solid green;}
.test2 a span.block2 {border:1px solid #fff}
.test2 a {border:1px solid #fff;background:#fff}
.test2 a:hover {color:green;background:#fffffc}
.test2 a:hover span.block1 {background:green;}
.test2 a:hover span.block2 {border:1px solid blue;}
</style>
</head>
<body>
<div class="outer">
<div class="container">
<div class="test1">
<p><a href="#">Some Link Text<span class="block1"></span>
<span class="block2"></span></a></p>
</div>
</div>
</div>
<div class="outer">
<div class="container">
<div class="test2">
<p><a href="#">Some Link Text<span class="block1"></span>
<span class="block2"></span></a></p>
</div>
</div>
</div>
<div class="outer">
<div class="container">
<div class="test1">
<p><a href="#">Some Link Text<span class="block1"></span>
<span class="block2"></span></a></p>
</div>
</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. | Add border to anchor when hover | | | | 22. | a[href^='http://']:hover | | | | 23. | Rollover with image | | | | 24. | Set cursor for a link | | |
|