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 Demo

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>元素添加到页面。

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

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

如果您想了解更多关于使用javascript添加CSS的信息，可以查看 one of David Walsh's Blog posts

Answer 4

我知道这有一个公认的答案，但如果有人提出这个问题，我的解决方案可能会有所帮助。

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

例如，css：

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

然后使用jQuery：

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

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

Answer 5

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

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

Answer 6

为时已晚，无论如何最好的例子，如何在jQuery样式中添加伪元素

 $(document).ready(function(){
 $("a.dummy").css({"background":"#003d79","color":"#fff","padding": "5px 10px","border-radius": "3px","text-decoration":"none"});
 $("a.dummy").hover(function() {
            $(this).css("background-color","#0670c9")
          }).mouseout(function(){
              $(this).css({"background-color":"#003d79",});
          });
 
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<a class="dummy" href="javascript:void()">Just Link</a>

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

6 个答案: