Inside Technique : Rollover Menus
By Scott Isaacs

This improves upon the original Rollover Menu Trade Secret. Rollover effects have become the most widely used Dynamic HTML trick. The release version of IE4 supports rollover effects declared entirely through Cascading Style Sheets (CSS) without requiring you to write any code. Whenever the mouse hovers over an anchor, the new CSS HOVER psuedo-class This example takes advantage of the new CSS HOVER psuedo-class defines the presentation. The benefit to using the anchor psuedo-class is that the style rule is ignored by browsers that do not understand it.

In Internet Explorer 4.0, moving the mouse over the text in the following menu highlights each item:

Description

Rather than write script for the mouseover effect, Internet Explorer 4.0 supports the new HOVER psuedo-class. This psuedo-class is supported on the anchor element and defines the style to be used whenever the mouse is over the anchor. Since CSS supports contextual selectors that allow you to scope the effects of the hover effect to specific anchors, you can define different effects for different anchors on your page. This page has a hover effect defined for any anchors contained within the element with the ID of "menu":

  <STYLE>
    /* Change the style whenever the mouse is over an anchor
       inside an element with the ID of menu */
    #menu A:hover {color: green; letter-spacing: 2px}
  </STYLE>

If you want to apply a HOVER effect to all anchors in your page, you can define a simple HOVER rule:

  <STYLE>
    /* Change the style whenever the mouse is over any anchor
       on your page */
    A:hover {color: green; letter-spacing: 2px}
  </STYLE>

With Internet Explorer 4.0, the following menu items highlight when the mouse hovers over the element. In all other browsers, the menu is statically displayed and the hover effect is ignored.

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