1

我在这样的标签上应用了一个 CSS 规则

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

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

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

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

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

4

9 回答 9

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 示例http://jsfiddle.net/X5r8r/1110/

于 2013-04-02T10:40:21.333 回答
1

更改您的 CSS 规则，使样式也有一个类名：

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

然后，您可以在希望提供悬停效果时简单地添加/删除类：

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

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

于 2013-04-02T10:40:37.893 回答
1

不，您不能以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(',');
}

演示

于 2013-04-02T11:27:22.123 回答
0 
$('.me a').hover(function (){ $(this).css("background-color,"red")}, 
function(){$(this).css("background-color,"black")});

应该帮助你:)

在这里您可以了解更多关于 Jquery http://api.jquery.com/hover/中的 hover()

于 2013-04-02T10:38:36.547 回答
0

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

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

使用以下CSS：

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

真的不需要小提琴，但无论如何：http: //jsfiddle.net/5fqXs/

于 2013-04-02T10:44:44.267 回答
0

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

1）将CSS规则更改为 

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

2）添加这个javascript代码 

$('.me a').hover(function(){
  $(this).addClass('hovered');
},function(){
  $(this).removeClass('hovered');
});
于 2013-04-02T10:45:39.390 回答
0

我使用的一种方法是：

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

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

于 2013-04-02T10:49:31.480 回答
-1

试试这个：

$('.me a').mouseenter(function(){
    $(this).css('background', 'red')
});
于 2013-04-02T10:38:21.440 回答
-1

与直接操作 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; }
于 2013-04-02T10:42:25.260 回答