使用 jQuery 或類似工具從 CSS 文件中指定的獲取“#myDiv:hover”樣式

Question

我需要檢查是否為 CSS 規則中的某些元素指定了任何 ":hover" 或 ":active" 樣式。 我需要遍歷這些元素，如果它們指定了規則，在$(document).ready上為 ie6 添加一些不支持 div 上的“:hover”或“:active”的事件。

我可以向需要“固定”的特定元素添加一個類，但我希望腳本能夠根據 CSS 中指定的內容工作。 那會讓它更有活力...

$('#elem').is(":hover")不會幫助選擇元素，因為我需要在實際懸停之前知道。

也許這很難/不可能在不加載文件“ajax-style”的情況下完成，這不是一個選項......

PS：是的，當然不鼓勵使用 IE6，但中國擁有 2 億台 XP 機器和 22% 的 IE6（截至 2014 年 3 月）是一個非常重要的市場（ 來源）。

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 。