jQuery: trigger a hover event from another element

Question

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

Comments

[I Hate Lazy]

.trigger('hover') isn't valid.

[I Hate Lazy]

$(".receiver").toggleClass("hover", event.type === 'mouseenter'); would be a little safer.

[I Hate Lazy]

You could do .trigger(event.type) to align both event types.

[I Hate Lazy]

This is the way to do it, assuming we're talking about bound handlers, and assuming all .receiver elements should be triggered. Using .hover() would work here too, but naming the events is better IMO.

[David Hellsing]

Yes, .hover works too, but I also think it’s usage logic is confusing when using only one argument.

[Haritsinh Gohil]

actually mouseenter event don't force element to a hover state, so in my case this does not force css rule :hover so css don't get affected, and that's what i wanted it to do.