How to write a:hover in inline CSS?

Question

I have a case where i must write inline CSS code.

And i want to apply hover style on an anchor.

How to write a:hover in inline css inside the html style attribute?

Answer 1

short answer: you can't.

long answer: you shouldn't.

Give it a class name or an id and use stylesheets to apply the style

:hover is a pseudo-selector and, for css, only has meaning within the style sheet. There is no inline-style equivalent (as it isn't defining the selection criteria).

Edit Response to Question poster's comments

See http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript for a good script on adding css rules dynamically.

also see http://www.quirksmode.org/dom/changess.html for some of the theory on the subject

Edit 2

Also, don't forget, you can add links to external stylesheets if that's an option. e.g.

var link = document.createElement("link");
link.setAttribute("rel","stylesheet");
link.setAttribute("href","http://wherever.com/yourstylesheet.css");
var heads = document.getElementsByTagName("head")[0];
head.appendChild(link);

caution : the above assume there is a head section.

Answer 2

You can't do exactly what you're describing, since a:hover is part of the selector, not the CSS rules. A stylesheet has two components:

selector {rules}

Inline styles only have rules; the selector is implicit to be the current element.

The selector is an expressive language that describes a set of criteria to match elements in an XML-like document.

However, you can get close, because a style set can technically go most anywhere:

<style>
#uniqueid:hover {do:something;}
</style>
<a id="uniqueid">hello</a>

Answer 3

<style>a:hover { }</style>
<a href="~/">Go Home</a>

Hover is a pseudo class, and thus cannot be applied with a style attribute. It is part of the selector.

Answer 4

Inline pseudoclass declarations aren't supported in the current iteration of CSS (though, from what I understand, it may come in a future version).

For now, your best bet is probably to just define a style block directly above the link you want to style:

<style type="text/css">
    myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>

Answer 5

No way to do this.

Your options is to use javascript or css block.

May be there is some javascript libary that will convert proprietary style attribute to style block. But then the code will not be standard complaint.

Answer 6

According to your comments, you're sending a JS file anyway. Why not do the rollover in Javascript? JQuery's $.hover() method makes it easy, as does every other javascript wrapper. It's not too hard in straight javascript either.

Answer 7

You can get the same affect by changing your styles with javascript, although its extremely inefficient if you need to change more than one thing:

<a href="abc.html" onMouseOver="this.style.color='#0F0'" onMouseOut="this.style.color='#00F">Text</a>

Also, I can't remember for sure if this works in this context, you may have to switch it with document.getElementById('idForLink')

Answer 8

.myRedLink A:hover { color:Red ; } my link

Answer 9

i agree with shadow, you could use the onmouseover and onmouseout event to change the css via js.

and dont say people need to have js activated bla bla, thats their own prob bro, its only a style issue so it doesnt matter if there are some visitors without js ;) although most ob web2.0 works with js. see facebook for example (lots of js) or myspace (")

Answer 10

PS. There is a very valid reason to use only inline and not CSS; if you are creating HTML Email News Letters since Gmail now only supports inline styles and strips ID tags and Style blocks