Вопрос:

Как вы добавляете псевдо-классы к элементам, используя jQuery?

jquery css css3 pseudo-class

54408 просмотра

3 ответа

5362 Репутация автора

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

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

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

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

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

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

Автор: jay Источник Размещён: 05.10.2012 06:47

Ответы (3)


50 плюса

557863 Репутация автора

Решение

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

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

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

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

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

Автор: BoltClock Размещён: 05.10.2012 06:50

8 плюса

395 Репутация автора

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

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

  1. Заводское CSS-псевдо-класс-правила-из-JavaScript
  2. CSS-псевдо-классы-с-JQuery
Автор: chanjarster Размещён: 05.10.2012 06:54

0 плюса

119 Репутация автора

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

Автор: I.Am.A.Guy Размещён: 14.07.2016 02:15
Вопросы из категории :
32x32