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

【问题标题】：How to define the css :hover state in a jQuery selector?如何在 jQuery 选择器中定义 css :hover 状态？
【发布时间】：2014-01-29 20:19:12
【问题描述】：

我需要在 :hover 上使用 jQuery 定义一个 div 的背景颜色，但以下似乎不起作用：

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

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

【问题讨论】：

试试这个stackoverflow.com/questions/5986464/…
jQuery 选择元素；它没有定义 CSS 规则。即使有可能，它也不会做你想做的事。
伪选择器在技术上不是 DOM 的一部分，因此无法使用 JavaScript 进行操作。
定义一个 CSS 规则来做到这一点。如果您真的必须这样做，您可以以编程方式（使用 JavaScript）插入包含规则的 <style> 元素，但我真的很想听听为什么您不能在自己的样式表中正确定义规则.
好的，等一下，我创建一个小提琴来显示确切的问题以及为什么它不能通过 css 完成

标签： javascript jquery html css

【解决方案1】：

我建议在 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 Demo

【讨论】：

可以做到，但我的问题是我有很多选择器...例如，我的代码如下所示： $(".logo, .logo-main, .logo-main :hover em, .another, .another:hover div").css("background","red");这就是为什么我想避免这种方法..
我猜你的意思是：$(".myclass").hover(function(e) { $(this).find('div').css("background-color",e.type === "mouseenter"?"red":"transparent") });
这个答案对于这个问题是正确的。您可以根据需要更改选择。
@George 看看你的选择器，你想要普通班级的红色背景以及他们的:hover 状态。那么为什么不简单地给他们background:red
@Sachin 我不明白你的意思：“看看你的选择器，你想要普通类的红色背景以及它们的 :hover 状态”？

【解决方案2】：

你可以试试这个：

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

DEMO

【讨论】：

【解决方案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.

【讨论】：

【解决方案4】：

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

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

例如，css：

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

然后使用 jQuery：

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

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

【讨论】：

刚刚遇到了与描述相同的情况。很好的解决方案

【解决方案5】：

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

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

【讨论】：

在 React 中也很好用

【解决方案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>

【讨论】：