47

在 CSS 中，当您将鼠标悬停在元素上时，您可以使用 :hover 伪类为其指定视图：

.element_class_name:hover {
    /* stuff here */
}

如何使用 jquery 添加或“打开”这个伪类？通常在 jQuery 中，如果你想添加一个类，你会这样做：

$(this).addClass("class_name");

我尝试过“悬停”，但这实际上为元素添加了一个名为“悬停”的类。

如果有人知道要写什么，请告诉我！谢谢！

4

4 回答 4

55

您不能强制使用 jQuery 应用某个伪类。这不是伪类（尤其是动态伪类）的工作方式，因为它们被设计为基于无法通过 DOM（规范）表达的信息进行选择。

您必须指定要使用的另一个类，然后使用 jQuery 添加该类。像这样的东西：

.element_class_name:hover, .element_class_name.jqhover {
    /* stuff here */
}

$(this).addClass("jqhover");

或者，您可以寻找.element_class_name:hover规则并使用 jQuery 本身添加该类，而无需将其硬编码到您的样式表中。不过原理是一样的。

于 2012-10-05T06:50:10.280 回答
8

我认为使用 jQuery 或 javascript 无法做到这一点。

您可以在以下两个问题中找到相同的答案：

  1. 设置-css-pseudo-class-rules-from-javascript
  2. 带有 jquery 的 css 伪类
于 2012-10-05T06:54:40.557 回答
0

在页面上制作一个div

<div id="Style">
  <style>
    .element_class_name:hover {
      /* stuff here */
    }
  </style>
</div>

然后以编程方式对样式进行硬编码，即

$("#Style").find("style").prepend("#" + this.id + ":hover, ");

不幸的是，你调用它的元素必须有一个 id。 

$("body").children().click(function(){
  $("#Style").find("style").prepend("#" + this.id + ":hover, ");
});
/* demo */
* {
  transition: opacity 1s;
}
<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  </head>
  <body>
    <div id="Style">
      <style>
        .element_class_name:hover {
          opacity: 0 !important;
        }
      </style>
    </div>

    <button id="btn1">Add hover class here</button>
    <button id="btn2">Add hover class here too</button>
    <p id="Note">
      To use this though, you'll have to assign an id to that particular element though.
    </p>
  </body>
</html>

于 2016-07-14T14:15:50.093 回答
0

jQuery 具有hover()如下所示的功能：https ://www.w3schools.com/jquery/event_hover.asp

:hover这是pollyfill的一个非常好的功能。

$(selector).hover(inFunction,outFunction)

于 2020-04-21T17:01:45.170 回答