jquery - 触发 CSS :hover using jquery

Question

我在这样的标签上应用了 css 规则

a { background-color: #000; }
a:hover {background-color: #ff0000; }

我想使用 jquery 触发它的悬停行为，这可能吗？这段代码运行良好，但没有将 bg 颜色更改为红色。

$('.me a').mouseenter();

为什么我需要这个？ 我必须为我的 Web 应用程序的菜单编写自动化测试，这就是我需要的。

这里的重点是我可以使用 jquery 执行附加到 a:hover 的浏览器行为吗？

Answer 1

不，您不能以编程方式设置悬停状态。

正如其他人所指出的，您可以通过编程方式设置类，并在悬停或分类时为元素使用相同的样式:

a.hover, a:hover { ... }

您可以使用 :focus 做类似的事情，它也可以通过编程方式设置 (demo)。

但是，您似乎只能在应用程序中触发 javascript，而不能更改其源代码的任何部分。在这种情况下，您必须做的是使用 java 脚本更改 css 规则本身。

在测试设置中，您可以将所有 :hover 样式更改为额外接受类名的样式:

function allowMockHover() {

    // iterate over all styleSheets
    for(var i = 0, l = document.styleSheets.length; i < l; i++) {
        var s = document.styleSheets[i];
        if(s.cssRules == null) continue;

        // iterate over all rules in styleSheet
        for(var x = 0, rl = s.cssRules.length; x < rl; x++) {
            var r = s.cssRules[x];
            if(r.selectorText && r.selectorText.indexOf(':hover') >= 0) {
               fixRule(r);
            }
        }
    }

}

function fixRule(rule) {

    // if the current rule has several selectors, treat them separately:
    var parts = rule.selectorText.split(',');
    for(var i = 0, l = parts.length; i < l; i++) {
        if(parts[i].indexOf(':hover') >= 0) {
           // update selector to be same + selector with class
           parts[i] = [ parts[i], parts[i].replace(/:hover/gi, '.mock-hover') ].join(',');
        }
    }

    // update rule
    rule.selectorText = parts.join(',');
}

Demo