jQuery simulate hover and click

Question

I'm currently making an addon for a site, but I stumbled upon a problem: my addon needs to simulate clicking a div, but the div only appears if you're hovering over another div. I tried

$("#id-1").trigger("mouseover");
$("#id-2").click();

but it doesn't really work because the box instantly dissapears again.

is there any way I can do this?

thanks in advance!

edit: $("#id-2") isn't just made invisible, its no longer there in the elements, they're using some code to delete it and put it back in place when you hover over $("#id-1")

Answer 1

If you have access to the CSS file you can use a hover class to do this, assuming they are siblings (could be modified to work with parent-child relationship) and and that they use display:block and display:hidden to hide/show the hidden element

/* CSS */
elemOne:hover ~ div, .hover ~ div { display:block; } // Applies on hover or if 
                                                     // hover class
/* jQuery */
$('elemOne').addClass('hover'); // Initialize the hover state
$('elemTwo').trigger('click');  // Click the now-showing element
$('elemOne').removeClass('hover'); // Remove the hover state

Demo