Как заставить состояние зависания с jQuery?

Пожалуйста, рассмотрите этот код CSS:

a { color: #ffcc00; }
a:hover { color: #ccff00; }

Этот код HTML:

<a href="#" id="link">Link</a>
<button id="btn">Click here</button>

И, наконец, этот JS-код:

$("#btn").click(function() {
   $("#link").trigger("hover");
});

Я хотел бы, чтобы моя ссылка использовала свой псевдокласс: наведите указатель мыши при нажатии кнопки. Я пытался запускать такие события, как mousemove, mouseenter, hover и т.д., Но кто-то работает. Обратите внимание, что я хочу принудительно использовать спецификацию псевдокома CSS: hover и не использовать что-то вроде:

$("#link").css("color", "ccff00");

Кто-нибудь знает, как мне это сделать? Большое вам спасибо.

Ответ 1

Вам нужно будет использовать класс, но не беспокойтесь, это довольно просто. Сначала мы назначим ваши правила :hover не только применительно к физически зависающим ссылкам, но также к ссылкам, которые имеют имя класса hovered.

a:hover, a.hovered { color: #ccff00; }

Затем, когда вы нажмете #btn, мы переключим класс .hovered на #link.

$("#btn").click(function() {
   $("#link").toggleClass("hovered");
});

Если ссылка уже имеет класс, она будет удалена. Если у него нет класса, он будет добавлен.

Ответ 2

Кроме того, вы можете попробовать запустить курсор мыши.

$("#btn").click(function() {
   $("#link").trigger("mouseover");
});

Не уверен, что это будет работать для вашего конкретного сценария, но у меня был успех, запускающий наведение мыши вместо зависания для различных случаев.