Как форсировать состояние наведения с помощью jQuery?

Question

Пожалуйста, рассмотрите этот код 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");
});

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

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

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

Answer 1

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

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

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

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

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

Answer 2

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

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

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

Answer 3

Я думаю, что лучшее решение, с которым я столкнулся, - это stackoverflow .Этот короткий код jQuery позволяет отображать все ваши эффекты при наведении мыши при нажатии или касании.
Не нужно ничего добавлять в функцию.

$('body').on('touchstart', function() {});

Надеюсь, это поможет.