how can i define a:hover using inline CSS?

canadianjameson · 07-20-2004, 10:26 PM

here my code now

Code:

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

i want to do this:

Code:

<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?

tsguitar2004 · 07-20-2004, 11: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/..._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?
-ts

Sk8er9547 · 07-20-2004, 11:11 PM

Check out this post I read on another forum...

http://www.webmasterworld.com/forum83/4061.htm

canadianjameson · 07-20-2004, 11:16 PM

Cheers.

tsguitar2004 · 07-20-2004, 11:18 PM

That's a forum that I looked at, too. Does that solve anything about this, though?
-ts

canadianjameson · 07-20-2004, 11: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:

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?

tsguitar2004 · 07-21-2004, 12:01 AM

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:
<body>
<style type="text/css">
a
{text-decoration:none;}
a:hover
{text-decoration:underline;}
</style>
??? 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.
-ts

canadianjameson · 07-21-2004, 12:49 AM

willy, glenn, etc et al.

where art thou!?

Antoniohawk · 07-21-2004, 01:48 AM

I'm no Willy or Glenn, but here, knock yourself out.

Code:

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

canadianjameson · 07-21-2004, 02:24 AM

wicked, muchos cracias non-willy/glenn entity

gohankid77 · 07-21-2004, 02: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.

*edit*

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.

Example:

Code:

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

a
{
text-decoration: none;
}

a:hover
{
color: #f0f;
}

a.nav:hover
{
text-decoration: underline;
}

</style>
</head>
<body>
<div>
  <a href="#" class="nav">Should be a light purple/magenta WITH underline</a>
  <br>
  <a href="#">Should be a light purple/magenta WITHOUT underline</a>
</div>
</body>
</html>

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

07-20-2004, 10:26 PM	PM User \| #1
canadianjameson Senior Coder Join Date: Jul 2003 Location: My pimped-out igloo in Canadia Posts: 1,957 Thanks: 34 Thanked 0 Times in 0 Posts	how can i define a:hover using inline CSS? here my code now Code: <a href="prodInfo/Sirco/PVS.htm" style="text-decoration: none; color: black; font-size: 16"> i want to do this: Code: <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? __________________ Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

07-20-2004, 11:11 PM	PM User \| #3
Sk8er9547 New Coder Join Date: Jun 2002 Location: Colorado Posts: 66 Thanks: 0 Thanked 0 Times in 0 Posts	Check out this post I read on another forum... http://www.webmasterworld.com/forum83/4061.htm __________________ -Sk8er9547

07-20-2004, 11:16 PM	PM User \| #4
canadianjameson Senior Coder Join Date: Jul 2003 Location: My pimped-out igloo in Canadia Posts: 1,957 Thanks: 34 Thanked 0 Times in 0 Posts	Cheers. __________________ Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

07-20-2004, 11:25 PM	PM User \| #6
canadianjameson Senior Coder Join Date: Jul 2003 Location: My pimped-out igloo in Canadia Posts: 1,957 Thanks: 34 Thanked 0 Times in 0 Posts	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: 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? __________________ Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

07-21-2004, 12:49 AM	PM User \| #8
canadianjameson Senior Coder Join Date: Jul 2003 Location: My pimped-out igloo in Canadia Posts: 1,957 Thanks: 34 Thanked 0 Times in 0 Posts	willy, glenn, etc et al. where art thou!? __________________ Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

07-20-2004, 11:06 PM	PM User \| #2
tsguitar2004 Regular Coder Join Date: May 2004 Location: San Jose, CA Posts: 386 Thanks: 0 Thanked 0 Times in 0 Posts	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/..._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? -ts

07-20-2004, 11:18 PM	PM User \| #5
tsguitar2004 Regular Coder Join Date: May 2004 Location: San Jose, CA Posts: 386 Thanks: 0 Thanked 0 Times in 0 Posts	That's a forum that I looked at, too. Does that solve anything about this, though? -ts

07-21-2004, 12:01 AM	PM User \| #7
tsguitar2004 Regular Coder Join Date: May 2004 Location: San Jose, CA Posts: 386 Thanks: 0 Thanked 0 Times in 0 Posts	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: <body> <style type="text/css"> a {text-decoration:none;} a:hover {text-decoration:underline;} </style> ??? 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. -ts

07-21-2004, 01:48 AM	PM User \| #9
Antoniohawk Moderator Join Date: Aug 2002 Location: Kansas City, Kansas Posts: 1,518 Thanks: 0 Thanked 2 Times in 2 Posts	I'm no Willy or Glenn, but here, knock yourself out. Code: <a href="#" style="text-decoration: none;" onmouseover="this.style.textDecoration = 'underline'" onmouseout="this.style.textDecoration = 'none'">asdasdasdads</a> __________________ xhtml :: attributes . tags . <abbr> vs. <acronym> CSS :: Box Model Hack [CF T-Shirts] [CP Resources] [ithium hosting] [A New Generation of Tree Menu]

07-21-2004, 02:24 AM	PM User \| #10
canadianjameson Senior Coder Join Date: Jul 2003 Location: My pimped-out igloo in Canadia Posts: 1,957 Thanks: 34 Thanked 0 Times in 0 Posts	wicked, muchos cracias non-willy/glenn entity __________________ Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

07-21-2004, 02:37 AM	PM User \| #11
gohankid77 Regular Coder Join Date: Jul 2004 Location: engoku no anime Posts: 354 Thanks: 0 Thanked 0 Times in 0 Posts	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. edit 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. Example: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd"> <html> <head> <title>Magenta</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css"> a { text-decoration: none; } a:hover { color: #f0f; } a.nav:hover { text-decoration: underline; } </style> </head> <body> <div> <a href="#" class="nav">Should be a light purple/magenta WITH underline</a> <br> <a href="#">Should be a light purple/magenta WITHOUT underline</a> </div> </body> </html> 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 __________________ Spread Firefox! Get Firefox! Last edited by gohankid77; 07-21-2004 at 02:53 AM..

Thread Tools
Show Printable Version Email this Page
Rate This Thread
Rate This Thread: