Inline style to act as :hover in CSS

Question

I know that embedding CSS styles directly into the HTML tags they affect defeats much of the purpose of CSS, but sometimes it's useful for debugging purposes, as in:

<p style="font-size: 24px">asdf</p> 

What's the syntax for embedding a rule like:

a:hover {text-decoration: underline;} 

into the style attribute of an A tag? It's obviously not this...

<a href="foo" style="text-decoration: underline">bar</a> 

...since that would apply all the time, as opposed to just during hover.

Answer 1

I'm afraid it can't be done, the pseudo-class selectors can't be set in-line, you'll have to do it on the page or on a stylesheet.

I should mention that technically you should be able to do it according to the CSS spec, but most browsers don't support it

Edit: I just did a quick test with this:

<a href="test.html" style="{color: blue; background: white}              :visited {color: green}             :hover {background: yellow}             :visited:hover {color: purple}">Test</a> 

And it doesn't work in IE7, IE8 beta 2, Firefox or Chrome. Can anyone else test in any other browsers?

Answer 2

If you are only debugging, you might use javascript to modify the css:

<a onmouseover="this.style.textDecoration='underline';"      onmouseout="this.style.textDecoration='none';">bar</a>