jQuery: trigger a hover event from another element

问题

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

回答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/

回答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.

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

回答4:

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

try

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

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

来源：https://stackoverflow.com/questions/13325519/jquery-trigger-a-hover-event-from-another-element

标签

javascript

jquery

html

hover

bind