Thread: maybe with CSS?

    #1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2004
    Location
    Constant Limbo
    Posts
    989
    Rep Power
    363

    maybe with CSS?


    i know there are many things you can do with CSS
    and one of them involves the a:hover ....
    i am interested in the ability to change color on mouseover
    Is there a way to change the color of each letter (or word)
    when the mouse hovers over it (note: this is not a link, just simple text).

    This doesnt have to be CSS, but I would like it to be browser independant.

    Thanks for any help!
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    It could have been all CSS, but you want a browser agnostic method. Unfortunately IE only recognizes :hover on the anchor element. this code is ungainly as hell, but maybe there's another way to do it.
    Code:
    <p>
    <span id="s" 
      onmouseover= "document.getElementById('s').style.color='red';"
      onmouseout="document.getElementById('s').style.color='blue';">s</span>
    
    <span id="p" 
      onmouseover= "document.getElementById('p').style.color='red';"
      onmouseout="document.getElementById('p').style.color='blue';">p</span>
    
    <span id="a" 
      onmouseover= "document.getElementById('a').style.color='red';"
      onmouseout="document.getElementById('a').style.color='blue';">a</span>
    
    <span id="n" 
      onmouseover= "document.getElementById('n').style.color='red';"
      onmouseout="document.getElementById('n').style.color='blue';">n</span>
    </p>
    The code works in Moz and IE6.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  4. #3
  5. Crypto-Con
    Devshed Supreme Being (6500+ posts)

    Join Date
    Apr 2004
    Location
    Frisco, Texas
    Posts
    6,704
    Rep Power
    1236
    Yeah, that's the ideal solution..... CSS is overrated, stick to HTML and JS where ya can, only invoke CSS where it's required.......
    - "Cryptographically secure linear feedback shift register based stream ciphers" -- a phrase that'll get any party started.
    - Why know the ordinary when you can understand the extraordinary?
    - Sponsor my caffeine addiction! (36.70 USD received so far -- Latest donor: Mark Foxvog.
    )
  6. #4
  7. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    css is not overrated.

    as gary said you can do this by css alone,
    every modern browser supports it mozilla, opera, konq/safari.

    Code:
    css:
    
    p {
    	color:blue;
    }
    
    p span:hover{
    	color:red;
    }
    
    html:
    <p><span>t</span><span>e</span><span>s</span><span>t</span></p>
    you can even make it more advanced,
    make a color for each of the letters, like this :
    (same markup as in the previous example)

    Code:
    p {
    	color:blue;
    }
    
    p span:hover{
    	color:red;
    }
    
    p span + span:hover{
    	color:black;
    }
    
    p span + span + span:hover{
    	color:green;
    }
    
    p span + span + span + span:hover{
    	color:yellow;
    }
    so css isn't overated, msie is.

IMN logo majestic logo threadwatch logo seochat tools logo