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 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.	Add border to anchor when hover
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;

Use anchor hover to highlight more than one tags : Anchor class « Tags « HTML / CSS

Related examples in the same category