jquery - trigger hover on one element when hovering over another

Question

I have a function which runs when an element which has the attribute 'tooltip' is hovered over which looks something like this...

$(".element1").hover( function() { 
    // Do stuff here...
}, function() {
    // Do other stuff here...
});

However, I have a need to place an element over the top of the one with the tooltip attribute which prevents the hover from working.

Is there a way to trigger the hover function when hovering over the top element? Something like this perhaps?

$('.element2').hover(function() {
    $(this).siblings('.element1').hover();
});

I have the same thing working for clicks, just not with hovers.

Answer 1

hover is in effect two events, mouseenter and mouseleave . You will need to trigger both of these events individually. Try this:

$('.element2').hover(
    function() { $(this).siblings('.element1').mouseenter(); },
    function() { $(this).siblings('.element1').mouseleave(); }
);