如何在jQuery选择器中定义css:hover状态？

Question

我需要定义div的背景颜色:使用jQuery悬停,但以下似乎不起作用:

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

我怎样才能得到相同的结果？重要的是必须使用jQuery,但由于某种原因它不起作用.有什么建议？谢谢!

Answer 1

我建议使用CSS而不是jquery(如果可能的话),否则你可以使用这样的东西

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

您可以根据需要更改选择器.

正如@ A.Wolff评论的那样,如果要将此悬停效果用于多个类,可以像这样使用它

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

Js Fiddle演示

Answer 2

你可以试试这个:

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

DEMO

Answer 3

嗯,你不能添加使用伪选择喜欢的造型:hover,:after,:nth-child,或类似的使用jQuery的任何东西.

如果你想添加一个类似的CSS规则,你必须创建一个<style>元素并将其添加:hover到它中,就像在CSS中一样.然后,您必须将该<style>元素添加到页面.

.hover如果您不能将css添加到样式表中,那么使用该函数似乎更合适,但如果您坚持可以这样做:

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

如果您想阅读有关使用javascript添加CSS的更多信息,可以查看 David Walsh的博客文章之一.

Answer 4

我知道这有一个公认的答案,但如果有人遇到这个问题,我的解决方案可能有所帮助.

我发现了这个问题,因为我有一个用例,我想单独关闭元素的悬停状态.由于在DOM中无法做到这一点,另一个好方法是在CSS中定义一个覆盖悬停状态的类.

例如,css:

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

然后使用jQuery:

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

使用此方法,您可以覆盖任意数量的DOM元素,而不会绑定大量的onHover事件.

Answer 5

使用 JQueryHover在 Hover 上添加/删除类或样式：

$( "mah div" ).hover(
  function() {
    $( this ).css("background-color","red");
  }, function() {
    $( this ).css("background-color",""); //to remove property set it to ''
  }
);