我在这样的标签上应用了一个 css 规则
a { background-color: #000; }
a:hover {background-color: #ff0000; }
我想使用 jquery 触发它的悬停行为，可以吗？此代码运行良好，但未将背景颜色更改为红色。
$('.me a').mouseenter();
为什么我需要这个？ 我必须为我的 Web 应用程序的菜单编写自动化测试，这就是我需要的。
这里的重点是我可以使用 jquery 执行附加到 a:hover 的浏览器行为吗？
【问题讨论】：
否，您不能以编程方式设置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(',');
}
【讨论】：
与直接操作 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; }
【讨论】：
:hover 的样式，只要 something else 发生，例如点击 another 链接。
据我所知，这里并不是触发浏览器默认的悬停行为（这不是你想要的吗？）。但即使有，正如你正在做的那样（$('a').mouseenter();），你只需模拟几分之一秒的悬停，就在它默认为正常行为之后。一种更简单的方法可能是添加一个类，如下所示：
$('a').addClass('is-hover');
使用以下 css：
a:hover,
a.is-hover {
background: red;
}
真的不需要小提琴，但无论如何：http://jsfiddle.net/5fqXs/
【讨论】：
我使用的一种方法是：
开始模拟悬停：
$('.me a').trigger("mouseover")
结束模拟悬停：
$('.me a').trigger("mouseleave)
【讨论】：
如果你想重用 CSS 规则，请执行以下操作
1) 将 CSS 规则更改为
a:hover, .hovered {background-color: #ff0000; }
2) 添加这个javascript代码
$('.me a').hover(function(){
$(this).addClass('hovered');
},function(){
$(this).removeClass('hovered');
});
【讨论】：
$('.me a').hover(function (){ $(this).css("background-color,"red")},
function(){$(this).css("background-color,"black")});
应该可以帮助你:)
在这里你可以了解更多关于 Jquery 中的 hover() http://api.jquery.com/hover/
【讨论】：
更改您的 CSS 规则，使样式也有一个类名：
a:hover,
a.mouseenter
{
background-color: #ff0000;
}
然后，您可以在希望提供悬停效果时简单地添加/删除类：
$('.me a').addClass("mouseenter");
【讨论】：
试试这个
<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/
【讨论】：
试试这个：
$('.me a').mouseenter(function(){
$(this).css('background', 'red')
});
【讨论】：