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

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

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

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

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

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

Если кто-нибудь знает, что писать, пожалуйста, дайте мне знать! Спасибо!
3 41
css css3 jquery pseudo-class

3 ответа:

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

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

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

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

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

45

Я думаю, что это невозможно сделать с помощью jQuery или javascript.

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

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

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

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

И затем программно жестко закодировать стиль, т. е. 

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