6

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

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

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

所以我的问题实际上是：

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

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

4

3 回答 3

3

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

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

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

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

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


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

于 2013-01-29T19:19:26.400 回答
3

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

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

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

于 2013-01-29T19:23:26.153 回答
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 执行此操作。

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

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

于 2013-01-29T19:21:25.860 回答