How to use CSS hover inside html-tag?

Question

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?

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

AFAIK You can't use pseudo-classes (:hover, :active, etc) on inline css.

Answer 5

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.