32

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");
});
Don P
  • 60,113
  • 114
  • 300
  • 432

4 Answers4

46

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/

Derek Henderson
  • 9,388
  • 4
  • 42
  • 71
David Hellsing
  • 106,495
  • 44
  • 176
  • 212
  • 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. – I Hate Lazy Nov 10 '12 at 20:11
  • 1
    Yes, `.hover` works too, but I also think it’s usage logic is confusing when using only one argument. – David Hellsing Nov 10 '12 at 20:17
  • 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. – Haritsinh Gohil Mar 17 '20 at 06:00
6

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.

suspectus
  • 16,548
  • 8
  • 49
  • 57
Andreas
  • 2,336
  • 2
  • 28
  • 45
1

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");
});​
Sergey Rybalkin
  • 3,004
  • 22
  • 26
0

hover() is a jQuery method that ties together mouseenter and mouseleave events

try

$(this).find('.receiver').mouseenter()

Or

 $(this).find('.receiver').trigger('mouseenter')

However you will likely have far better results adding a class to the a tag and adding a new css rule.

 $(this).find('.receiver').toggleClass('hoverClass')
charlietfl
  • 170,828
  • 13
  • 121
  • 150