1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Change regular text color on rollover

Discussion in 'CSS' started by Jiraiya, Jan 5, 2006.

  1. #1
    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?
    SEMrush
     
    Jiraiya, Jan 5, 2006 IP
    SEMrush
  2. rossriley

    rossriley Guest

    Messages:
    25
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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
     
    rossriley, Jan 7, 2006 IP
  3. siteprocentral

    siteprocentral Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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>
     
    siteprocentral, Jan 16, 2006 IP