The CSS2 :hover pseudo-class (2)

Combining :hover with a class

The above syntax creates rollovers for all the text links in our page. We may want only some of our links to display a rollover behavior, or we may want several of our links to display a different rollover behavior from the global one defined for the A tag. Both of these are easily accomplished by combining :hover with a standard CSS class.

A.wr {
    color:#D00000;
    font-size:10pt;
    font-weight:bold;
    font-family:Arial,Verdana,Geneva;
    text-decoration:none;
}

A.wr:hover {
    color:white;
    background-color:purple;
}

In this example, any instance of <A CLASS=wr will cause the link to change to white on a purple background, upon mouseover.

<CENTER>
<DIV STYLE="width:400;border:1px #D00000 solid">
<A
    CLASS=wr
    HREF="http://www.webreference.com/">
    &nbsp;&nbsp;home&nbsp;&nbsp;</A>
<A
    CLASS=wr
    HREF="http://www.webreference.com/cgi-bin/search.cgi">
    &nbsp;&nbsp;search&nbsp;&nbsp;</A>
<A
    CLASS=wr
    HREF="http://www.webreference.com/index2.html">
    &nbsp;&nbsp;contents&nbsp;&nbsp;</A>
<A
    CLASS=wr
    HREF="http://www.webreference.com/new/">
    &nbsp;&nbsp;update&nbsp;&nbsp;</A>
<A
    CLASS=wr
    HREF="http://www.webreference.com/headlines/">
    &nbsp;&nbsp;news&nbsp;&nbsp;</A>
<A
    CLASS=wr
    HREF="http://www.webreference.com/cgi-bin/Ultimate.cgi">
    &nbsp;&nbsp;forum&nbsp;&nbsp;</A>
</DIV>
</CENTER>

With the simple addition of a border in a DIV element, we have created this image-like text rollover:

Consider this example of an image-like rollover:

  home      
  search    
  contents  
  update    
  news      
  forum     

A.menu {
    color:white;
    font-weight:bold;
    font-size:12pt;
    font-family:monospace;
    text-decoration:none;
    background-color:#D00000;
}

A.menu:hover {
    color:white;
    letter-spacing:1px;
    background-color:purple;
}

A set-width background-color can only be applied if the width property is also defined. We can, however, avoid the use of width and create the box-of-color effect by specifying a monospace (fixed-width) font, and using &nbsp;. Now, by expanding the letter-spacing by a pixel, upon mouseover, we simulate an overlayed image. Notice that we specified the color property in the :hover definition, even though it is the same as the standard defition. Why? Because, the cascading behavior of CSS also calls the global :hover definition A:hover {color:blue}. We over-ride the default, by re-declaring the color rule in the A.menu:hover definition.

The page HTML looks like this:

<A
    CLASS=menu
    HREF="http://www.webreference.com/">
    &nbsp;&nbsp;home&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</A><BR>
<A
    CLASS=menu
    HREF="http://www.webreference.com/cgi-bin/search.cgi">
    &nbsp;&nbsp;search&nbsp;&nbsp;&nbsp;&nbsp;</A><BR>
<A
    CLASS=menu
    HREF="http://www.webreference.com/index2.html">
    &nbsp;&nbsp;contents&nbsp;&nbsp;</A><BR>
<A
    CLASS=menu
    HREF="http://www.webreference.com/new/">
    &nbsp;&nbsp;update&nbsp;&nbsp;&nbsp;&nbsp;</A><BR>
<A
    CLASS=menu
    HREF="http://www.webreference.com/headlines/">
    &nbsp;&nbsp;news&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</A><BR>
<A
    CLASS=menu
    HREF="http://www.webreference.com/cgi-bin/Ultimate.cgi">
    &nbsp;&nbsp;forum&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</A>

Combining :hover with an ID

#big {text-decoration:none;}

#big:hover {
    width:300;
    font-size:200%;
    background-color:purple;
    letter-spacing:1px;
    color:white;
}

The page HTML defines a unique named element:

<A ID=big HREF="http://www.webreference.com/dhtml/">  DHTML Lab  </A>

The resulting rollover:

  DHTML Lab  

Since :hover is CSS-based, requiring no scripting, page compatibility with all browsers is assured. If the global :hover definition is used, then no further intervention into the page HTML on existing pages is necessary. Explorer 4 users can simply enjoy the extra functionality, until other browsers include :hover in their rendering machines.