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 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…