Changing the Text Color Dynamically in Modern Browsers

Geeta Punjabi, Raleigh, North Carolina
123Triad: Web Design & SEO Company

Changing the Text Color Dynamically in Modern Browsers

In the world of web design, it was almost impossible to get Netscape 4 to change the attributes of the text when the mouse was rolled over it just some years back. This had an implication that it was easy creating a text link which could change color. It could underline the text when the mouse was rolled over it in internet explorer. Mostly, designers had to be content with this effect not being felt on Netscape 4.i.e the change of color when a mouse is rolled over a text.

However, if one wants to achieve this effect in his design he would consider using hover. Hover, which is the CSS2 pseudo-class, is supported by most modern browsers. Some of these browsers include; Opera6+, Netscape 6+, Mozilla 1+ as well as Internet Explorer 6+.

The pseudo-Classes
In CSS, a class is an attribute of CSS which allows a designer to be able to denote a sub-set of elements within a certain document. Often, it is used in defining style differences between the given basic element (say, <h1></h1>) as well the sub-group of the same element (say <h1 class=”blue”></h1>).They are classified on the basis of the name given by the designer.

A pseudo-class is defined as a grouping within the document. This definition is based on some intrinsic characteristics of the particular document. Some common pseudo-classes include the following:

• :link
• :visited
• :active
• :focus
• :hover
• : Focus on hover

Setting up of CSS styles on the hover pseudo-class is needed when one wants to create a rollover effect on a particular text. The most common place where rollover effects are put is on links, although on most text elements, one can use the: hover pseudo-class.

The following syntax when put in a style sheet will set the links to change to dark red when the mouse is being moved over the text.
a:hover { color : #c00; }

While the following syntax will set a text to change to green when the mouse is hovering over the particular text.
p.green:hover { background-color : #ff0; }

Summary

The use of hover which is a CSS2 pseudo-class has provided much improvement in the world of web design. As we have seen, just some years back, it was not possible to get Netscape 4 to change the attributes of the text when the mouse was rolled over it. But thanks to hover, now the attributes of a text can be changed when the mouse is rolled over that particular text i.e. text color can be changed dynamically.

Hover also provides much flexibility to the designers as it is supported by many modern browsers namely Opera 6+, Netscape 6+, Mozilla 1+ and Internet Explorer 6+. Examples of usage of hover include the following;

To enable the links to change to dark red when the mouse is being rolled over it, use the following syntax:
a:hover{color:#c00:}

While to set a text to change to green when the mouse rolls over it the following syntax is employed;
p:green:hover{background-color:#ffo:}

123Triad webdesign offers affordable custom website design. Our full service website design company only hires certified website designers. Please contact us today on 1-800-720-0816 for your next web site design project.

Related posts:

1. Adding Color to your Website Lorenzo Hayes    – Phoenix, AZ...
2. Psychology of Color and Website Design Geeta Punjabi, Raleigh, North Carolina...
3. Color Themes for Business Websites Jeffery Bryant    – Raleigh, NC...
4. WEB DESIGN – COLOR SCHEMES Dhiraj Mishra. 123Triad: Web Design...
5. Web Designs for The Color Blind Geeta Punjabi, Raleigh, North Carolina...
6. How to Choose Web Site Color in Web Designing Edwin. – LA, California 123Triad:...
7. Test How Your Website Looks To Others Chad Argo – Phoenix, AZ...
8. Web browsers; which one is the best? Drake Moore 123Triad: Web Design...
9. The Importance of Color in Graphics of Web Pages Trevon Perez     – NYC, NY...
10. Choosing the Right Color Scheme for Your Web Design Alwin Wright   – Phoenix, AZ...