maybe with CSS? - Dev Shed

Dev Shed Forums Sponsor:

April 5th, 2004, 11:19 PM

L7Sqr

Contributing User

Join Date: Jan 2004

Location: Constant Limbo

Posts: 617

Time spent in forums: 1 Week 3 Days 1 h 2 m 47 sec
Reputation Power: 101

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!

April 6th, 2004, 12:31 AM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,554

Time spent in forums: 1 Month 2 Days 7 h 25 m 29 sec
Reputation Power: 607

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.

Ask a better question, get a better answer.

April 6th, 2004, 02:18 AM

B-Con

Crypto-Con

Dev Shed God 4th Plane (6500 - 6999 posts)

Join Date: Apr 2004

Location: UC Davis

Posts: 6,656

Time spent in forums: 1 Month 5 Days 19 h 53 m 56 sec
Reputation Power: 871

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 recieved so far -- Latest donor: Mark Foxvog)

April 6th, 2004, 05:51 AM

Akh

|<.+#f@#+.&.|

Join Date: Mar 2002

Location: norway

Posts: 2,648

Time spent in forums: 3 Weeks 6 Days 15 h 7 m 20 sec
Reputation Power: 571

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.

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: