Question

181

rated 0 times [ 184] [ 3] / answers: 1 / hits: 80561 / 12 Years ago, sat, november 10, 2012, 12:00:00

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

});

Only authorized users can answer the question. Please sign in first, or register a free account.

Total Points: 113

Total Questions: 100

Total Answers: 115

Location: Egypt

Member since Tue, May 3, 2022

2 Years ago

yosefleod questions

Tue, Mar 8, 22, 00:00, 2 Years ago

Thu, Apr 22, 21, 00:00, 3 Years ago

Mon, Jul 27, 20, 00:00, 4 Years ago

Sun, Dec 8, 19, 00:00, 5 Years ago

Sun, Sep 29, 19, 00:00, 5 Years ago

answered 12 Years ago jamaal · Accepted Answer

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/