O'Reilly logo

Practical Web Technologies by V. Lau, P. K. Yuen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required