I want to do something like this:
<li style="hover:background-color:#006db9;">
But it wont work. Is this possible to do in some way, or do I have to write the css in the head or external css-document?
Add a comment
|
5 Answers
It is not possible with inline styles, but the (in)famous onmouseover / onmouseout event handler can do the same thing.
<li onmouseover="this.style.backgroundColor='#006db9'" onmouseout="this.style.backgroundColor=''">
Caveat: CSS definitions with hyphens have to be translated to Javascript using camelCase, like (css)background-color = (javascript)backgroundColor
1 Comment
PanDe
you'd the man ;-)
This is not possible using the style attribute. You'll have to use CSS, either in the document itself or in an external file.
li:hover { background-color:#006db9; }
If that's not an option then you'll have to resort to JavaScript.
4 Comments
BalusC
Not to mention that those pseudoclasses doesn't work on all browsers. The only reliable resort is JS.
Zack The Human
Agreed. Unfortunately this is the truth :(
Pekka
Are there (halfway current) browsers that do not support :hover other than IE < 7?
Zack The Human
Not many. Unfortunately for me IE6 is the only browser "supported" at work, so my perspective is skewed.
AFAIK this can't be done inline without Javascript. You will have to put it into the head or external stylesheets as you already suggest.
A <style> tag in the body is also interpreted by all browsers I know but is not valid and therefore not recommendable.
Comments
AFAIK You can't use pseudo-classes (:hover, :active, etc) on inline css.
Comments
Instead of just having the <li>, you can nest it in an anchors tag <a href="#" class="hoverable"> and then put this styling at the top of the file or in an external CSS file:
a.hoverable:hover{background-color:#006db9}
Or you can just use Javascript to avoid using the anchor tag.
I'd recommend JQuery.
