Question

我想将所有:hover类复制到.hoverid个类中，其中id是元素的索引（或任何其他创建unqiue悬停类名称的方法）。

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

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

所以我的问题实际上是：

如何迭代定义了“：hover”的元素？
如何将该类克隆到另一个类中？

小提琴尝试解决方案：http://jsfiddle.net/kLt2P/

Answer 1

JS和CSS完全相互独立。换句话说，您无法通过JS访问CSS类的属性，但是您可以访问元素的CSS属性，因为JS会对元素进行操作。

<强>解决方案
您可以使用一些hackish解决方案来解决这个问题，但最好的解决方案可能是创建一个＆＃34;反向扩展＆＃34; jQuery中的方法。换句话说，您必须通过获取两个数组并返回第二个中与第一个数组中不同或不存在的所有属性来编写与.extend()相反的方法。这实际上并不像听起来那么困难。

接下来你要做的是获取页面上的每个元素并运行你的＃34;反向扩展＆＃34;他们的方法。当不作为第一个参数悬停时，您必须通过调用元素上的.css()方法返回返回的数组，并且在悬停时在元素上调用.css()方法时返回数组，作为第二个参数。

如果结果数组不为空，则该元素确实定义了:hover类（或者应用了JS :hover类）。这里是踢球者：结果数组将具有:hover类的所有属性！

关于捕获悬停的说明：
您可以通过绑定mousein，mouseenter和hover来捕获悬停。我建议使用mousein和mouseenter并使用变量标志来指示是否已完成其他操作。由于它们可能在某些浏览器中同时运行，因此使用.on和.off方法绑定和取消绑定处理程序可能需要一些额外的功能，以防止类的重复克隆。此实现应该为您提供所有主流浏览器（IE6-10，Safari，Opera，Chrome和Firefox）的支持 更新：我错误地认为能够触发伪悬停状态（抱歉） - 这是不可能通过JS。但是，您可以使用此解决方案捕获悬停，然后克隆类＆＃39;它首次悬停时的属性。然后，您可以将hovered元素添加到jQuery数组中，您将使用该数组确保不会多次查看同一元素（使用.not）。这样做的缺点是，如果将同一个:hover类分配给多个元素，您将无法多次阻止克隆:hover伪类。

如果您对此有任何疑问，请与我们联系。祝好运！：）

Answer 2

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执行此操作。

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

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

Answer 3

您实际上可以使用像JSCSSP这样的库并以某种方式解析所有CSS文件( $('link['rel="stylesheet"']).attr('href') )并基于此创建类。另一种方法是用一些基本的正则表达式自己解析它。暂时没有想法 - 但我会尝试一下。

您也可以将webworkers用于表现。

http://www.glazman.org/JSCSSP/

克隆CSS类

3 个答案: