克隆CSS类

Question

我想将所有:hover类复制到.hoverid类中,其中id元素的索引(或任何其他方式来创建unqiue悬停类名称).

所以,我的想法是以某种方式遍历页面上的所有元素,这些元素已经:hover定义并克隆了该类.hoverid.这样我可以触发我想要的任何元素上的悬停效果:

$('#element').addClass('hover'+$(this).id);

所以我的问题实际上是:

小提琴试试你的解决方案:http://jsfiddle.net/kLt2P/

Answer 1

CSS 已经为您完成了这项工作。在你的 CSS 中，输入

.hoverid:hover
{
    // your hover styling.
}

要动态地将“悬停”效果放在任何元素上，您可以使用或生成class="hoverid" 它

$('#element').addClass('hoverid');

hoverid这是一个不寻常的名字，我认为你的意思是有不同的悬停样式，在这种情况下，只需使用不同的 CSS 类来定义样式的语义以及为什么它会有不同的行为。

例如：

.definition:hover { }
.syntax:hover { }
.useroption:hover { }

并将正确的语义 CSS 类应用到您想要的任何元素。瞧！您将根据元素的类型获得正确的动态结果。

了解您希望能够添加此类并“动态”触发它，您可以像这样定义 CSS：

.definitionhover, .definition:hover { }

然后可以访问该类，.addClass("definitionhover")同时保留 CSS 的自动悬停格式。

请参阅http://jsfiddle.net/kLt2P/1/了解如何创建命名约定，以便您可以对各个 ID 执行此操作。

请参阅http://jsfiddle.net/kLt2P/5/了解如何在不更改 CSS 的情况下执行此操作。注意：这会解析实际的 css，因此您需要文件中定义的确切值作为选择器。

请参阅http://jsfiddle.net/kLt2P/14/通过创建动态样式表将这两种方法组合在一起。