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

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

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

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

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

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

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

Ответ 1

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

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

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

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

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

Ответ 2

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

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

Ответ 3

Сделайте 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>