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

Answer 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/

Answer 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.