克隆 CSS 类

Question

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

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

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

所以我的问题实际上是：

1. 如何遍历定义了“:hover”的元素？
2. 如何将该类克隆到另一个类中？

尝试您的解决方案：http://jsfiddle.net/kLt2P/

Answer 1

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

您也可以使用网络工作者来提高性能。

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

Answer 2

JS 和 CSS 完全相互独立。换句话说，你不能通过 JS 访问 CSS 类的属性，尽管你可以访问元素的 CSS 属性，因为 JS 作用于元素。

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

您接下来要做的是获取页面上的每个元素并在它们上运行您的“反向扩展”方法。您必须将不悬停时调用元素上的.css() 方法返回的数组作为第一个参数传递，并将悬停时调用元素上的.css() 方法返回的数组作为第二个参数传递。

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

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

如果您对此有任何疑问，请告诉我。祝你好运！ :)

Answer 3

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/，通过创建动态样式表将这两种方法组合在一起。