Как добавить псевдоклассы в элементы с помощью jQuery?

в CSS, когда вы наводите курсор мыши на элемент, вы можете указать представления для него, используя: hover псевдо-класс:

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

Как вы можете использовать jquery для добавления или" включения " этого псевдокласса? Обычно в jQuery, если вы хотите добавить класс, вы бы сделали:

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

я попробовал "hover", но это буквально добавляет класс с именем" hover " к элементу.

Если кто-нибудь знает, что написать, пожалуйста, дайте мне знать! Спасибо!

41
css css3 jquery pseudo-class

3 ответов

вы не можете принудительно применить определенный псевдокласс с помощью jQuery. Это не так, как работают псевдоклассы (особенно динамические псевдоклассы), поскольку они предназначены для выбора на основе информации, которая не может быть выражена через DOM (spec).

вы должны указать другой класс для использования, а затем добавить этот класс с помощью jQuery. Что-то вроде этого:--5--> 

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

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

в качестве альтернативы вы можете охотиться за .element_class_name:hover правило и добавьте этот класс, используя сам jQuery, без hardcoding его в вашу таблицу стилей. Но принцип тот же.

45

Я думаю, что нет способа сделать это с помощью jQuery или JavaScript.

вы можете найти тот же ответ в этих двух вопросах:

  1. настройка-css-псевдо-класс-правила-из-javascript
  2. css-псевдо-классы-с-jquery
8

сделайте div на странице

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

а затем программно hardcode стиль, то есть,

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

к сожалению, элемент, который вы вызываете, должен иметь идентификатор. 

$("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>
0