Practical Web Technologies

6.3. Changing text attributes with mouse over

6.3.1. Highlighting text with a dynamic background color

Another popular technique on the Web is to change text background color dynamically when the mouse moves over it. This is often used to highlight options or selected items so that the visitor knows what he or she is choosing. It also has the so-called “getting the attention” effect. By using style (CSS style) and the DOM structure, changing text colors (whether foreground or background) can be done in an elegant way.

Suppose you have a CSS style class called .text01 as listed in ex06-04.txt:

Listing . ex06-04.txt

1: <style> 2: .text01 { 3: font-size:16pt; 4: font-family:arial,sans-serif; 5: color: green; 6: background-color:white 7: } 8: ...