jQuery: trigger a hover event from another element

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");
});

Solution 1:

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/

Solution 2:

You could do something like-:

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

And now you can have a class that holds the css rules.

Solution 3:

Not sure what you mean by "hovered", but assuming you have some CSS defined for .receiver:hover pseudo class I would suggest to move them to the separate CSS class .hover and use jQuery toggleClass function.

Here is a quick example that makes link text bold when you move mouse over the div - http://jsfiddle.net/Pharaon/h29bh/

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