View Full Version : Make a NON link hover?

Oct 28th, 2004, 08:12 PM
I need to make some text, have a hover color/font/size etc... but NOT make it a link... I'm sure I could do this by just adding # to the link, but I would rather it not be clickable...

I also want to make it several colors:

Ja << one color
bird << another
. <<another
com << yet another color

and then when it hovers, they all change colors...

this will likely just be 2 different colors, and they will switch positions...

can this be done in CSS? or would I have to make an image for it? I've seen something alot like this on a Blog, and it was selectable text, I assume that this was done with CSS, as it was a blog for CSS only...

any help would be much appreciated,

Oct 28th, 2004, 08:19 PM
Put the text in a span, and apply a :hover to it.



<p>We are the <span class="man">knights</span> who say Nee</p>


span.man:hover {background-color:#0000ff}

Oct 28th, 2004, 08:20 PM
is it not possible to have it several colors? or would I have to put each part in a different span, and make 2 different CSS :hover things, and apply them depending on which text I want to chage? then it would only change the part they hovered, not the whole thing right?


Roy Sinclair
Oct 28th, 2004, 08:25 PM
If your target audience is using modern browsers (that excludes IE) then a pure CSS solution is possible:

<style type="text/css">
{color: #00f;}
{color: #f0f;}


<span class="changeOnHover">Some text that'll change when the mouse is over</span>

If it's necessary to make this work with IE then you'll have to add onmouseover/onmouseout events and some javascript to effect the changes.

Oct 29th, 2004, 01:36 AM
Thanks, my target audience is Firefox/Mozilla/Netscape etc users, I am considering writing an If, Else statement, where if you are running IE, it gives you a message with a link to firefox :p, and if your not in IE, it doesn't give a message :)

Thanks again,

Oct 29th, 2004, 05:13 AM
All kidding aside, if you're going to the trouble of badgering people with js, why not just use it to fix the problem instead? You know...