如何将悬停类添加到元素?

时间:2020-12-12 12:08:44

In my CSS I have:

我的CSS中有:

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

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

当DOM准备好时,排序类下的所有LI元素都能正常运行。

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.

如果我创建一个新的LI元素(使用mootools el.addClass(classname)),我可以设置基类,但无法弄清楚如何向其添加悬停类。

Any ideas?

5 个解决方案

#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.

所以它通过样式表以相同的方式定义。您只需提前计划,知道您将在JS生成的具有特定类的LI标签上定义类名称,并为其设置样式,尽管列表项在您使用JavaScript创建之前不存在。

#2


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

添加非悬停类时会自动添加悬停类。例如。如果你有

.MyClass
{
...
}

.MyClass:hover
{
...
}

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

只需添加MyClass,MyClass:hover就可以了。

#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.

:hover不是一个类,而是一个伪选择器,它将选择鼠标当前悬停的任何元素。如果您创建一个li元素并向其添加排序类,那么每当您将鼠标移到元素上时,如果浏览器正常工作,则应激活li.sort:hover规则。

#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.

并非所有浏览器都会接受所有元素上的悬停伪类。您应该考虑使用javascript来实现此效果。例如,jQuery使这很容易。

#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.

并非所有浏览器都会接受所有元素上的悬停伪类。您应该考虑使用javascript来实现此效果。例如,jQuery使这很容易。

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

更具体地说,IE6只能选择:锚点(a)元素上的悬停样式。

#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.

所以它通过样式表以相同的方式定义。您只需提前计划,知道您将在JS生成的具有特定类的LI标签上定义类名称,并为其设置样式,尽管列表项在您使用JavaScript创建之前不存在。

#2


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

添加非悬停类时会自动添加悬停类。例如。如果你有

.MyClass
{
...
}

.MyClass:hover
{
...
}

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

只需添加MyClass,MyClass:hover就可以了。

#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.

:hover不是一个类,而是一个伪选择器,它将选择鼠标当前悬停的任何元素。如果您创建一个li元素并向其添加排序类,那么每当您将鼠标移到元素上时,如果浏览器正常工作,则应激活li.sort:hover规则。

#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.

并非所有浏览器都会接受所有元素上的悬停伪类。您应该考虑使用javascript来实现此效果。例如,jQuery使这很容易。

#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.

并非所有浏览器都会接受所有元素上的悬停伪类。您应该考虑使用javascript来实现此效果。例如,jQuery使这很容易。

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

更具体地说,IE6只能选择:锚点(a)元素上的悬停样式。