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






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
    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;