How To Change Background image/video On Hover Using Elementor Free

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const thumbnail = document.querySelectorAll(".thumbnail");
    const thumbnailBg = document.querySelectorAll(".thumbnail-bg");

    let lastActiveIndex = null;

    thumbnail.forEach((item, index) => {
      item.addEventListener("mouseenter", () => {
        // Remove active from all first
        thumbnail.forEach(el => el.classList.remove("active"));
        thumbnailBg.forEach(bg => bg.classList.remove("active"));

        // Add active to current hovered
        item.classList.add("active");
        if (thumbnailBg[index]) {
          thumbnailBg[index].classList.add("active");
        }

        lastActiveIndex = index;
      });

      item.addEventListener("mouseleave", () => {
        // On mouseleave, don't remove active from last hovered
        thumbnail.forEach((el, i) => {
          if (i !== lastActiveIndex) el.classList.remove("active");
        });
        thumbnailBg.forEach((bg, i) => {
          if (i !== lastActiveIndex) bg.classList.remove("active");
        });

        // Re-add active to the last hovered item
        if (lastActiveIndex !== null) {
          thumbnail[lastActiveIndex].classList.add("active");
          if (thumbnailBg[lastActiveIndex]) {
            thumbnailBg[lastActiveIndex].classList.add("active");
          }
        }
      });
    });
  });
</script>