Question

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

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

我想使用jquery触发其悬停行为，这可能吗？此代码运行正常，但不会将bg颜色更改为红色。

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

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

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

Answer 1

试试这个

<a href="#">Move the mouse pointer over this paragraph.</a>

$(document).ready(function(){
  $("a").mouseover(function(){
    $("a").css("background-color","yellow");
  });
  $("a").mouseout(function(){
    $("a").css("background-color","lightgray");
  });
});

Jsfiddle examplw http://jsfiddle.net/X5r8r/1110/

Answer 2

更改CSS规则，以便样式也具有类名：

a:hover,
a.mouseenter
{
   background-color: #ff0000;
}

然后，只要您希望提供悬停效果，您就可以添加/删除该类：

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

现场演示： http://jsfiddle.net/X3Hm9/

Answer 3

否，您无法以编程方式设置hover状态。

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

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

Answer 4

$('.me a').hover(function (){ $(this).css("background-color,"red")}, 
function(){$(this).css("background-color,"black")});

应该帮助你：）

在这里，您可以在Jquery http://api.jquery.com/hover/

中了解有关hover（）的更多信息

Answer 5

据我所知，这里并不是真的触发浏览器默认的悬停行为（这就是你想要的不是吗？）。但即使有，当你正在做（$('a').mouseenter();）时，你只需要模拟像悬停的一小部分，就在它默认为正常行为之后。一种更简单的方法可能只是添加一个类，如下所示：

$('a').addClass('is-hover');

使用以下css：

a:hover,
a.is-hover {
    background: red;
}

真的没有必要小提琴，但无论如何它都在这里：http://jsfiddle.net/5fqXs/

Answer 6

如果要重用CSS规则，请执行以下操作

1）将CSS规则更改为

a:hover, .hovered {background-color: #ff0000; }

2）添加此javascript代码

$('.me a').hover(function(){
  $(this).addClass('hovered');
},function(){
  $(this).removeClass('hovered');
});

Answer 7

我使用过的一种方法是：

开始模拟悬停： $('.me a').trigger("mouseover")

结束模拟悬停： $('.me a').trigger("mouseleave)

Answer 8

试试这个：

$('.me a').mouseenter(function(){
    $(this).css('background', 'red')
});

Answer 9

与直接操作CSS相比，此代码背后的推理是CSS属于样式表而不是单个页面。现在假设您想要更改背景颜色应用程序，并且您正在直接更改jQuery中的CSS，请玩得开心。通过下面的示例，您可以更改CSS工作表中的.hoverClass，然后就完成了。

a { background-color: #000; }
.hoverClass {background-color: #ff0000; }



$('.me a').mouseenter(function(){
     $(this).toggleClass('hoverClass');
}).mouseout(function(){
     $(this).toggleClass('hoverClass');
});

虽然如上所述，这似乎完全没有意义，因为悬停类的概念是你想要实现的。

.me>a:hover {background-color: #ff0000; }

使用jquery悬停css：hover

9 个答案: