JS鼠标触发坏

如何解决JS鼠标触发坏

我在使用 javascript 时遇到一些悬停鼠标事件的问题。当我通过其中一个条目时，会显示参考图像，但事件是交替的。怎么修？我想在“悬停”中显示当前图像，并在它位于框上方时将其隐藏而无需更改。

我尝试设置一个间隔，停止传播...

HTML 代码：

            <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代码：

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");
    });
}