如何使用 jQuery 获得锚点的 :hover css 样式？答案

【问题标题】：How get the :hover css style of an anchor with jQuery?如何使用 jQuery 获得锚点的 :hover css 样式？
【发布时间】：2010-10-13 20:21:52
【问题描述】：

如何使用 jquery 即时获得 css 样式表中的 :hover？

愚蠢的例子：

a.foo {
    color: red;
    font-size: 11px;
}

a.foo:hover {
    color: blue;
    font-size: 12px; 
}

如何在鼠标移过锚点之前检索颜色和字体大小？

【问题讨论】：

【解决方案1】：

看看Extra selectors for jQuery。

此外，您可以使用hover 事件，具体取决于您想要实现的目标。见：jQuery hover and class selector。

【讨论】：

这些额外的选择器还不错，但是 jQuery 1.3 是否支持它们？是的，我已经使用了悬停事件，但我需要制作一个“通用”的“悬停”脚本，所以直接在 css 样式表上更改样式而不是将直接样式传递给函数/对象可能会很舒服。
@avastreg：我也没有用过，所以我不知道它们是否有效 =)

【解决方案2】：

如何在鼠标移过锚点之前检索颜色和字体大小？

没有。在将鼠标悬停在该元素上之前，您无法检索 :hover 伪类的样式声明。这是因为 JavaScript 只能使用 DOM 与 HTML 交互。除非元素上有鼠标悬停，否则样式信息（悬停状态）对 DOM 不可用，因此您无法检索这些值（即使通过模拟悬停状态）。

【讨论】：

【解决方案3】：

如果您确实需要，您可以通过 document.styleSheet 属性访问此信息。此处提供了一个示例：http://jsfiddle.net/Xm2zU/1/

请注意，IE 需要自己的代码来执行此操作，因为它使用“.rules”而不是“.cssRules”等。

【讨论】：

【解决方案4】：

您可以改用.hover() 函数。 http://api.jquery.com/hover/

$( "a.foo" ).hover(
  function() {
    $( this ).css( 'color','red' );
  }, function() {
    $( this ).css( 'color','blue');
  }
);

【讨论】：