Когда вы наводите курсор на один <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");
});
Попробуйте следующее:
$('.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/
Вы можете сделать что-то вроде::
$(".initiator").hover(function(){
$(".receiver").addClass('hover');
console.log("div was hovered");
}, function(){
$(".receiver").removeClass('hover');
});
И теперь у вас может быть класс, содержащий правила css.
Не уверен, что вы подразумеваете под "зависанием", но при условии, что у вас есть определенный 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");
});
hover() - это метод jQuery, который связывает события mouseenter и mouseleave
попробовать
$(this).find('.receiver').mouseenter()
или
$(this).find('.receiver').trigger('mouseenter')
Однако вы, вероятно, получите гораздо лучшие результаты, добавив класс в тег a и добавив новое правило css.
$(this).find('.receiver').toggleClass('hoverClass')