jQuery: trigger a hover event from another element

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.

Answer 3

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

Answer 4

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