如何在jQueryselect器中定义css：hover状态？

我需要定义div的背景颜色：hover与jQuery，但以下似乎并没有工作：

$(".myclass:hover div").css("background-color","red"); 

我怎样才能得到相同的结果？ 重要的是必须用jQuery来完成，但由于某种原因，它不起作用。 有什么build议么？ 谢谢！

Answer 1

我会build议在jQuery上使用CSS（如果可能），否则你可以使用这样的东西

 $("div.myclass").hover(function() { $(this).css("background-color","red") }); 

您可以根据需要更改select器。

正如@A.Wolff所说，如果你想把这个hover效果用于多个类，你可以像这样使用它

 $(".myclass, .myclass2").hover(function(e) { $(this).css("background-color",e.type === "mouseenter"?"red":"transparent") }) 

Js小提琴演示

Answer 2

你可以试试这个：

 $(".myclass").mouseover(function() { $(this).find(" > div").css("background-color","red"); }).mouseout(function() { $(this).find(" > div").css("background-color","transparent"); }); 

DEMO

Answer 3

那么，你不能使用伪select器来添加样式:hover ， :after ， :nth-child ，或者类似使用jQuery的样式。

如果你想添加一个像这样的CSS规则，你必须创build一个<style>元素，并添加:hover规则，就像你在CSS中。 那么你将不得不将<style>元素添加到页面。

使用.hover函数似乎更适合，如果你不能只添加到样式表的CSS，但如果你坚持你可以做：

$('head').append('<style>.myclass:hover div {background-color : red;}</style>')

如果你想阅读更多关于使用javascript添加CSS的信息，你可以查看一下David Walsh的博客文章 。

Answer 4

我知道这有一个被接受的答案，但如果有人遇到这个问题，我的解决scheme可能会有帮助

我发现这个问题，因为我有一个用例，我想单独closures元素的hover状态。 由于在DOM中没有办法做到这一点，另一个好办法是在CSS中定义一个覆盖hover状态的类。

例如，CSS：

 .nohover:hover { color: black !important; } 

然后用jQuery：

 $("#elm").addClass("nohover"); 

使用这种方法，您可以覆盖尽可能多的DOM元素，而无需绑定onHover事件。