Inside Technique : Hover Behavior
By Scott Isaacs

The Hover Behavior is a very simple behavior that adds 2 style states to any element on your page - the mouse over and the mouse down state. For each state, you can define a different rendering using a CSS class.

Below is a simple demonstration (IE5 Only):

While the hover behavior is very simple it relies on a new enhancement to the HTML class attribute. This behavior works by changing the class attribute based on whether the mouse is over, down, or leaving the element. Each time we swap the class attribute we want to ensure the new style is cascaded (combined) with the original style. The easiest way to accomplish this is to use the new compound class-name support added in Internet Explorer 5.

Prior to Internet Explorer 5.0, each element could only be associated with one class. Internet Explorer 5.0 enhances this support by allowing multiple class-names to be defined on an element simply by listing each of them. For example, to associate a paragraph with the new and cool class:

<P CLASS="new cool">
  This is new and cool
</P>

In the hover behavior we apply the new classes by prepending them to the default class. For example:

<P CLASS="cool" classDown="downStyle" classOver="overStyle">
  Demo Paragraph
</P>

When the mouse moves over the paragraph the class is set to: "overStyle cool". We prepend the new class to ensure that any style rules defined by overStyle override those set by the cool class. When the mouse leaves the element, the class is reset to just cool.

Next we describe how to add the hover behavior to your page and provide the complete code for hover.htc.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.