从 CSS 文件中指定的 jQuery 或类似文件中获取“#myDiv:hover”样式

Question

我需要检查是否为 CSS 规则中的某些元素指定了任何“:hover”或“:active”样式。如果在 $(document).ready 上指定了这些元素，我需要遍历这些元素，以便为 ie6 添加一些在 div 上不支持“:hover”或“:active”的事件。

我可以向需要 "fixed" 的特定元素添加 class，但我希望脚本能够根据 CSS 中指定的内容工作.这将使它更有活力...

$('#elem').is(":hover") 对 select 元素没有帮助，因为我需要在实际悬停之前知道。

也许这是 hard/impossible 在不加载文件 "ajax-style" 的情况下完成的，这不是一个选项...

PS: 是的，当然不应该鼓励使用 IE6，但是拥有 2 亿台 XP 机器和 22% IE6（截至 2014 年 3 月）的中国是一个非常重要的市场（source).

Answer 1

您可以扫描包含 :hover 或 :active 的选择器的所有 css 规则，然后根据需要处理这些规则的 cssText。

var iSheet, sheet, iRule, rules, rule;
for (iSheet=0; iSheet<document.styleSheets.length; iSheet++) {
    sheet = document.styleSheets[iSheet];
    rules = sheet.rules || sheet.cssRules;
    for (iRule=0; iRule<rules.length; iRule++) {
        rule = rules[iRule];        
        if (rule.selectorText.indexOf(":hover") > -1) {
            console.log(rule.cssText);
        }
    }
}

这里是jsfiddle.

从 CSS 文件中指定的 jQuery 或类似文件中获取“#myDiv:hover”样式

Get "#myDiv:hover" style from specified in CSS-file with jQuery or similar

css

jquery

internet-explorer

pseudo-class

internet-explorer-6