Change regular text color on rollover

You put your mouse over a paragraph of text and the text changes colors. I have seen this before. I am not talking about a link changing color on rollover. I am talking about just plain regular text.

I can't find out how to do this. Any suggestions?

 

Hello.
Theoretically you can add a different style to any element by using the :hover pseudo class.

so if you had...
<span id='change'>Rollover me to change color</span>
adding the following to your stylesheet....
#change:hover { color:red;}
would make the text go red when you put your mouse over the text.

Now the bad news. Current versions of IE only allow :hover to be applied to <a> tags so you can only do it in links. The above example would work in most other browsers though.

The alternative is use some javascript to change the style. If you were to use the behaviour library (http://bennolan.com/behaviour) you could even do this in a standards compliant way as well.

Let me know if you need any more help.

Ross

 

Hi, This uses DOM but I find it works almost everywhere and does NOT require a text link - WARNING! you must place the single quotes around the color code and double quotes around the rest.

For clarity: onMouseOver=" bgColor='#00aaff' "

Working Code: <td onMouseOver="bgColor='#00aaff'" onMouseOut="bgColor='#0099ff'">

This will probably work on other elements too like <p>