JQuery: запуск события hover из другого элемента

Когда вы наводите курсор на один <div>, я хочу, чтобы <a> на отдельной части страницы также "зависал".

<div class="initiator">
</div>
<div>
   <a class="receiver href="#">Touch the div and I get hovered!</a>
</div>

Я пробовал этот jQuery, но он не вызывает CSS <a> hover.

$(".initiator").hover(function(){
   $(".receiver").hover();
   console.log("div was hovered");
});

Ответы

Ответ 1

Попробуйте следующее:

$('.initiator').on('mouseenter mouseleave', function(e) {
    $('.receiver').trigger(e.type);
})

Он будет применять те же триггеры для приемника, что и инициатор, для обоих мышей и мыши. Обратите внимание:

.hover(over, out)

- это просто вариант высокого уровня:

.on('mouseenter', over).on('mouseleave', out)

поэтому используя эту информацию, вы можете быть более точным при привязке и срабатывании событий мыши.

Как отмечено в комментарии, вы также можете использовать:

$('.initiator').hover(function(e) {
    $('.receiver').trigger(e.type);
})

Здесь есть еще много: http://api.jquery.com/hover/

Ответ 2

Вы можете сделать что-то вроде::

$(".initiator").hover(function(){
   $(".receiver").addClass('hover');
   console.log("div was hovered");
}, function(){
   $(".receiver").removeClass('hover');
});

И теперь у вас может быть класс, содержащий правила css.

Ответ 3

Не уверен, что вы подразумеваете под "зависанием", но при условии, что у вас есть определенный CSS для класса .receiver:hover pseudo, я бы предложил переместить их в отдельный класс CSS .hover и использовать функцию jQuery toggleClass.

Вот краткий пример, который делает текст ссылки полужирным при перемещении мыши над div - http://jsfiddle.net/Pharaon/h29bh/

$(".initiator").hover(function(){
  $(".receiver").toggleClass("hover");
  console.log("div was hovered");
});

Ответ 4

hover() - это метод jQuery, который связывает события mouseenter и mouseleave

попробовать

$(this).find('.receiver').mouseenter()

или

 $(this).find('.receiver').trigger('mouseenter')

Однако вы, вероятно, получите гораздо лучшие результаты, добавив класс в тег a и добавив новое правило css.

 $(this).find('.receiver').toggleClass('hoverClass')