无法使用 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')
})