How can I add a hover class to an element?

Question

In my CSS I have:

li.sort:hover {color: #F00;}

All my LI elements under the sort class function properly when the DOM is ready.

If I create a new LI element (using mootools el.addClass(classname) ) I can set the base class, but can't figure out how to add a hover class to it.

Any ideas?

Answer 1

The hover pseudoclass can be defined ahead of time in the stylesheet based on the classname that you're specifying. Such as:

li.classname:hover {color:#F000;}

So it's defined the same way, via the stylesheet. You would just plan ahead, knowing that you'll be defining the class name on JS-generated LI tags with a certain class, and style for it despite the fact that the list items don't exist until you create them with JavaScript.

Answer 2

Hover class is added automatically when you add the non hover class. Eg if you have

.MyClass
{
...
}

.MyClass:hover
{
...
}

just add the MyClass , and the MyClass:hover will work.

Answer 3

:hover is not a class, but is a pseudo-selector that will select any elements the mouse is currently hovering over. If you create an li element, and add the sort class to it, then whenever you move your mouse over the element, the li.sort:hover rule should be activated, if the browser is working correctly.

Answer 4

Not all browsers will accept the hover pseudo class on all elements. You should consider using javascript for this effect. jQuery for example, makes this very easy.

Answer 5

Not all browsers will accept the hover pseudo class on all elements. You should consider using javascript for this effect. jQuery for example, makes this very easy.

To be more specific, IE6 only picks up :hover styles on anchor (a) elements.