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

70

我需要在jQuery的：hover上定义div的背景颜色，但是以下内容似乎无效：

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

如何获得相同的结果？重要的是必须使用jQuery完成，但由于某些原因它无法正常工作。有什么建议？谢谢！

— 乔治
source

1

试试这个stackoverflow.com/questions/5986464/…–

— Gjohn

2

jQuery选择元素；它没有定义CSS规则。即使有这种可能，它也不会做您想要的。

— SLaks 2014年

从技术上讲，伪选择器不是DOM的一部分，因此不能使用JavaScript进行操作。

— Blazemonger，2014年

1

定义一个CSS规则来做到这一点。如果确实需要，您可以以<style>编程方式（使用JavaScript）插入包含规则的元素，但我真的很想听听为什么您无法在自己的样式表中正确定义规则。

— Matt Ball

好的，等等，我创建了一个小提琴以显示确切的问题以及为什么不能通过CSS做到这一点

— George

83

我建议在jQuery上使用CSS（如果可能的话），否则可以使用类似这样的东西

$("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演示

— 萨钦
source

可以做到，但是我的问题是我有很多选择器...例如，我的代码如下：$（“。logo，.logo-main，.logo-main：hover em，.another，。 another：hover div“）。css（” background“，” red“）; 这就是为什么我想避免这种方法..

— 乔治·

2

我猜你的意思是：

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

— A. Wolff 2014年

这个问题的答案是正确的。您可以根据需要更改选择。

— JerryHuang.me 2014年

1

@George查看您的选择器，您希望普通类及其:hover状态使用红色背景。那么，为什么不简单地给他们background:red

— -Sachin

@Sachin我不明白您在这里的意思：“看看您的选择器，您要普通背景以及其：hover状态使用红色背景”？

— A. Wolff 2014年

28

您可以尝试以下方法：

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

DEMO

— 拉希尔·瓦齐尔（Rahil Wazir）
source

17

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

我找到了这个问题，因为我有一个用例，在这里我想分别关闭元素的：hover状态。由于在DOM中无法执行此操作，因此另一种好方法是在CSS中定义一个覆盖悬停状态的类。

例如，css：

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

然后用jQuery：

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

使用此方法，可以在不绑定大量onHover事件的情况下覆盖任意数量的DOM元素。

— 丰珠
source

只是与上述情况相同。不错的解决方案

— xperator

15

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

如果要添加这样的CSS规则，则必须像在CSS中那样创建一个<style>元素并将该:hover规则添加到其中。然后，您将不得不将该<style>元素添加到页面。

.hover如果您不能只是将css添加到样式表中，那么使用该函数似乎更合适，但是如果您坚持可以，则可以执行以下操作：

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

如果您想了解更多有关使用JavaScript添加CSS的信息，可以查看 David Walsh的Blog文章之一。

— Arjabbar
source

3

使用JQueryHover在悬停时添加/删除类或样式：

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

— 戈尔·古尔
source

1

为时已晚，但是最好的例子是如何以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>

展开摘要

— 维拉
source