克隆CSS类

Question

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

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

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

我的问题实际上是：

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

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

- XCS

---

我不确定这是否是你实际可以做到的事情... - Colleen

一个独特的类？这不是 id 的作用吗？ - Matt Burland

你为什么要试图做这件事？ - Colleen

@Colleen 因为我想触发特定元素上的悬停效果，但我无法使用JavaScript触发本机':hover'。 - XCS

@Colleen，如果我理解你的评论正确的话，当我们重写规则时，我们将使用生成的类而不是原始选择器。因此，:hover 将不再适用，只有类会适用。 - Frédéric Hamidi

Answer 1

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

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

接下来要做的事情是对页面上的每个元素运行你的“反向扩展”方法。你必须将调用元素未悬停时调用.css()方法返回的数组作为第一个参数，将悬停时调用.css()方法返回的数组作为第二个参数传递。

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

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

如果你对这个有任何问题，请让我知道。祝你好运！:)

- Zachary Kniebel

---

对不起，克里斯蒂，我搞错了。你能告诉我班级将何时被克隆吗？换句话说，你必须提前克隆它们，还是可以在进行操作时逐个克隆，例如当每个元素被悬停时克隆？ - Zachary Kniebel

只要我能触发悬停事件，就可以在元素悬停时克隆类。 - XCS

这就是问题所在：你需要做的是使用.css()方法提前获取每个元素的CSS样式，并将它们存储在一个对象中（注意，你可能需要在这里使用一些原生JS来存储一些节点信息，以便稍后正确识别元素 - 你可能还想在这里使用JSON）。你需要实现我在解决方案中描述的处理程序和“反向扩展”方法，并在元素悬停时调用后者。有关更多信息，请参阅我的更新，位于“关于捕获悬停”的下方。 - Zachary Kniebel

请看我对被接受的答案的评论。似乎只需将:hover替换为.hover即可实现神奇的效果，因为JavaScript可以访问并动态更改页面上的样式表。 - XCS

Answer 2

您可以使用类似于JSCSSP的库来解析所有CSS文件 （$（'link ['rel ="stylesheet"] ').attr('href')） ，然后根据此创建类。另一种方法是使用一些基本的正则表达式自行解析。目前没有想法，但我会尝试一些东西。

您还可以使用Web Workers来提高性能。

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

- ioan

---

这很有趣，但我会非常担心开销。 - Zachary Kniebel

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

- Plynx

---

是的，但我希望能够使用JavaScript 应用这里定义的样式。:hover 无法使用 JavaScript 触发（某种程度上可以，但它只在 Firefox 中起作用，而且效果不如预期）。 - XCS

你需要在不改变CSS窗口中的任何内容的情况下，实现与你在fiddle中所做的相同结果。 - XCS

@GamsterKatalin 谢谢，这是一个有趣的难题。 - Plynx

现在的问题是一个元素可以被多个选择器样式化，所以我应该想办法选择所有具有与当前元素匹配的选择器的样式。 - XCS

@Cristy 很好！昨天似乎几乎不可能，但永远不要说永远！ - Plynx