Question

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

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

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

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

我尝试过“悬停”，但这会在字面上添加一个名为“hover”的类。

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

Answer 1

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

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

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

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

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

Answer 2

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

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

Answer 3

在页面上创建一个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>

Answer 4

jQuery具有hover()函数，如下所示：https://www.w3schools.com/jquery/event_hover.asp

这对于:hover pollyfill是一个非常不错的功能。

$(selector).hover(inFunction,outFunction)

如何使用jQuery向元素添加伪类？

4 个答案: