JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hoverintent.min.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <h1>Working element, Hover here</h1>
    <iframe></iframe>
    <script src="script.js"></script>
  </body>
</html>

CSS

h1 {
  background-color: aqua;
}

iframe {
  width: 400px;
  height: 300px;
  border: none;
  margin-top: 100px;
  margin-left: 200px;
  background-color: red;
}

JavaScript

const workingElement = document.querySelector('h1');

hoverintent(
  workingElement,
  () => {
    console.log('WORKING - IN');
  },
  () => {
    console.log('WORKING - OUT');
  }
);

const iframe = document.querySelector('iframe');

const textElement = document.createElement('p');
textElement.innerHTML =
  'Chrome works on default interval from top and left (only when you crossing edges) and then from other sides but only when you start from top or left<br><br>' +
  'Firefox not working at all what is expected<br><br>' +
  'If you add borders iframe it will work but only when you hover on borders<br><br>' +
  'Problem is with mousemove event not being triggered for iframe element (inside of the iframe)';

iframe.contentDocument.body.appendChild(textElement);

hoverintent(
  iframe,
  () => {
    console.log('IFRAME - IN');
  },
  () => {
    console.log('IFRAME - OUT');
  }
);