javascript - JS mouse trigger bad

Question

I have a problem with some hover mouse events using javascript. When I pass over one of the entries the reference image is shown but the event is alternate. How fix it? I want to display the current image in "hover" and hide it when it's over the box without alterations.

I try set an interval, stop propagation...

HTML CODE:

            <div class="d-inline-block">
                <div class="hover_collaborazioni">
                    <span class="home_collaboration-hover"><?php the_field('nome')?></span>
                    <span class="text-16"><?php the_field('anno')?></span>
                </div>
                <div class="modal z-index-100">
                    <div class="modal-contenuto">
                        <?php the_post_thumbnail('single-post-thumbnail'); ?>
                    </div>
                </div>
            </div>

JS CODE:

let linkModal = document.querySelectorAll(".home_collaboration-hover");
  linkModal.forEach(item => {
    item.addEventListener("mouseenter", (event) => {
      item.parentElement.parentNode.querySelector(".modal").classList.add("d-block");
      item.parentElement.parentNode.querySelector(".modal").classList.add("d-flex");
    });
    item.addEventListener("mouseleave", (event) => {
      item.parentElement.parentNode.querySelector(".modal").classList.remove("d-block");
      item.parentElement.parentNode.querySelector(".modal").classList.remove("d-flex");
    });
}

question from:https://stackoverflow.com/questions/65908819/js-mouse-trigger-bad

Answer 1

Waitting for answers