HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mouseout vs mouseleave</title>
  <style>
    #test {
      font-size: 1.2rem;
      padding: 8px 8px 8px 2rem;
      margin: 0;
      border: 1px solid #333;
      width: 12rem;
    }
  </style>
</head>
<body>
  <ul id="test">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
  <script>
    var test = document.getElementById("test");
    test.addEventListener("mouseleave", function (event) {
      event.target.style.color = "purple";
      setTimeout(function () {
        event.target.style.color = "";
      }, 1000);
    });
    test.addEventListener("mouseout", function (event) {
      event.target.style.color = "orange";
      setTimeout(function () {
        event.target.style.color = "";
      }, 500);
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Element mouseout — MDN list out vs leave (Try It)