When you hover over one <div>
, I want an <a>
on a separate part of the page to be "hovered" on also.
<div class="initiator">
</div>
<div>
<a class="receiver href="#">Touch the div and I get hovered!</a>
</div>
I've tried this jQuery, but it doesn't trigger the <a>
's hover CSS.
$(".initiator").hover(function(){
$(".receiver").hover();
console.log("div was hovered");
});
Try this:
$('.initiator').on('mouseenter mouseleave', function(e) {
$('.receiver').trigger(e.type);
})
It will apply the same triggers for the receiver as the initiator receives for both mouseenter and mouseleave. Note that:
.hover(over, out)
is just a high-level variant of:
.on('mouseenter', over).on('mouseleave', out)
so using that information you can be more precise when binding and triggering mouse events.
As noted in the comment, you can also use:
$('.initiator').hover(function(e) {
$('.receiver').trigger(e.type);
})
There are lots more to read here: http://api.jquery.com/hover/