View Full Version : how can i define a:hover using inline CSS?

07-20-2004, 09:26 PM
here my code now

<a href="prodInfo/Sirco/PVS.htm" style="text-decoration: none; color: black; font-size: 16">

i want to do this:

<a href="prodInfo/Sirco/PVS.htm" style="text-decoration: none; color: black; font-size: 16; a:hover {text-decoration: underline}">

whats the correct syntax for this?

07-20-2004, 10:06 PM
Not much support for inline declaration of pseudoclasses like hover. I tried a few different combinations and couldn't get anything to show up, even a change in background color. I'm on a PC and used IE6 and NN7 to no avail. I found a link to this (http://www.w3.org/TR/2002/WD-css-style-attr-20020515), but it's a working draft and doesn't seem to be very useful in application. It's just the syntax for making such declarations, but they don't work.

You can use a javascript onmouseover to show styles, but I don't know enough about that to tell you how. A quick search should turn up some results. Here's one I found: http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21043237.html
(scroll to the bottom of that page)

Why not just make some CSS statements in the <head> of the document or use a seperate style sheet? Are you stuck to inline styles because of other restrictions?

07-20-2004, 10:11 PM
Check out this post I read on another forum...


07-20-2004, 10:16 PM

07-20-2004, 10:18 PM
That's a forum that I looked at, too. Does that solve anything about this, though?

07-20-2004, 10:25 PM
actually guys i dont get it.. i used the suggestions and i think i'm doing something wrong, something really stupid.

here's my code:

style="{text-decoration: none; color: black; font-size: 16} :hover {text-decoration: underline}"

what i want is an inline code that only shows the link underline when the mouse is over it. i can use onmouseover, but if there's a simple CSS solution i'll take that.

is Hover even what i should be using?

07-20-2004, 11:01 PM
Yeah; :hover is what you are talking about, but I can't get it to work inline either. I think that it's not supported, just *defined* in a working draft at the W3C.

What about using:
<style type="text/css">
??? You MUST have this inline? I can't get it to work that way and I'm not reading much else about it being supported as an inline element. Sorry I can't help.

07-20-2004, 11:49 PM
willy, glenn, etc et al.

where art thou!?


07-21-2004, 12:48 AM
I'm no Willy or Glenn, but here, knock yourself out. :)

<a href="#" style="text-decoration: none;" onmouseover="this.style.textDecoration = 'underline'" onmouseout="this.style.textDecoration = 'none'">asdasdasdads</a>

07-21-2004, 01:24 AM
wicked, muchos cracias non-willy/glenn entity

07-21-2004, 01:37 AM
The answer Antoniohawk gave was the best solution, if you really desperately NEED to use inline styles. You cannot define what happens when a user hovers over an object, such as a link or certain text, using inline styles. You can however use the onMouseOver and onMouseOut events to call JavaScript and change the styles. The only problem I've had is how to determine which color to use onMouseOut. Should I use the visited color or the unvisited color? If the user has visited the link, why use the unvisited color? Likewise, if the user has not visited the link, why use the visited color? Just some food for thought. :thumbsup:


I do, however, second the recommendation to use an actual stylesheet despite Antonio's wonderful suggestion. Just apply a class to a specific hover element and add the class attribute to the element you want the effect to happen on.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">

text-decoration: none;

color: #f0f;

text-decoration: underline;

<a href="#" class="nav">Should be a light purple/magenta WITH underline</a>
<a href="#">Should be a light purple/magenta WITHOUT underline</a>

Just copy the above code into a completely blank HTML document. The links obviously link to nothing. This is just to show an example.

Tested in Mozilla 1.7 and IE6