:hover and :active

  • a:hover works in all browsers except for Netscape 4 and iCab.
  • a:active doesn't work in Konqueror and Opera 5 on Mac and is buggy in Explorer on Windows.
  • On other elements :hover works in Konqueror and Netscape 6.
  • On other elements :active works in Netscape 6.
  •  

    Originally invented by Microsoft, the :hover pseudoclass was an immediate hit. You could change the style of a link when the user moved the mouse over it. Similarly, :active gave special styles for an active link (between the mouseDown and mouseUp).

    Testsheet:

    P:hover {color: #cccc00;}
    P:active {color: #0000cc;}
    

    Testlink for the old effect on links. The :active pseudoclass is buggy in Explorer on Windows, the link remains red until you click on something else, while it should only be red between the mouseDown and mouseUp events.

    These two pseudoclasses are now being ported to all elements. Unfortunately Netscape 6's implementation of :hover was buggy before: it only worked when you hover over an empty part of a paragraph, not when you hover over the text. This bug has been solved in Mozilla 1.0 RC 3 (or maybe earlier).

    Try it, the border will help you understand the effect.

    Contents