In the bad old days it was very difficult, or almost impossible to get Netscape 4 to change text attributes when the mouse rolled over it. This meant that while it was relatively simple to create a text link that would change color or underline when the mouse hovered over it in Internet Explorer, designers had to be content with that effect not happening on Netscape 4.
Now, modern browsers (Netscape 6+, Internet Explorer 6+, Mozilla 1+, and Opera 6+) all support the CSS2 pseudo-class: hover
Pseudo-Classes
A class in CSS is an attribute of CSS that allows designers to denote a sub-set of elements within the document. It is most often used to define style differences between the basic element (say, <h1></h1>) and the sub-group of that same element (say <h1 class="blue"></h1>). They are classified based on the name given by the designer.
A pseudo-class is a grouping within the document based on some intrinsic characteristic. Some common pseudo-classes are:
- :link - the standard link
- :visited - a link that has been visited recently
- :active - the item is being clicked on
- :focus - the item has focus
- :hover - the mouse is hovering over the item
:hover
To create a rollover effect on text - you need to set up CSS styles on the :hover pseudo-class. The most common place to put rollover effects is on links, but you can use the :hover pseudo-class on most text elements.
To set all your links to change to dark red when the mouse is hovering, put the following in your style sheet: (this does work in IE 5)
a:hover { color : #c00; }
To set all your "yellow" class paragraphs to a yellow background color when the mouse is hovering, put the following in your style sheet: (this does not work in IE 5 or 6)
p.yellow:hover { background-color : #ff0; }
