Can't trigger hover event on other element with jQuery

Question

Hello I am trying to write a jQuery snippet which will simulate a hover event on flipbox when a button is clicked. The main problem is that I have tried all solutions given on stackoverflow for this scenario but it just doesn't seem to work at all.

Front of flipbox in dev console

Front of flipbox in dev console

Below are the code I have tried on this same element

jQuery('.eael-elements-flip-box-container').mouseenter().mouseleave();
jQuery('.eael-elements-flip-box-container').mouseover();
jQuery('.eael-elements-flip-box-container').trigger("hover");
jQuery('.eael-elements-flip-box-container').trigger("mouseover");
jQuery('.eael-elements-flip-box-container').trigger("mouseenter");

Answer 1

You could trigger the event and have an event listener on the other element like this:

$("#click-btn").click(()=>{
   $(".hover-me").trigger('mouseover')
})

$(".hover-me").mouseover(()=>{
  console.log('hovered')
})