Hay un letrero que cambia al pasar el mouse. pero el problema es que si lo apuntas y tocas otro bloque dentro, sigue funcionando. Dime qué y dónde necesitas agregar/cambiar para que funcione correctamente: Cuando pasas el cursor sobre una tarjeta (hizo una rotación una vez), y cuando quitas el cursor de ella, vuelve a su posición anterior.
Aquí está el enlace para el código completo
const wr = document.querySelectorAll('.wrapper') wr.forEach((items) => { items.addEventListener('mouseover', (e) => { console.log(e.target); setTimeout(() => { items.children[0].style.display = "none" items.children[1].style.display = "none" items.children[2].style.display = "block" }, 300) }) items.addEventListener('mouseout', (e) => { setTimeout(() => { console.log(e.target); items.children[0].style.display = "block" items.children[1].style.display = "block" items.children[2].style.display = "none" }, 300) }) })Tiene su problema debido al bucle forEach . El problema era que su evento se invocaba en cada elemento que tenía la clase wrapper , y por eso se invocaba cada vez más.
Simplemente elimínelo y use querySelector en lugar de querySelectorAll .
Además, como se menciona en la sección de comentarios, use mouseenter y mouseleave .
const wr = document.querySelector('.wrapper') wr.addEventListener('mouseenter', (e) => { setTimeout(() => { wr.children[0].style.display = "none" wr.children[1].style.display = "none" wr.children[2].style.display = "block" }, 300) wr.addEventListener('mouseleave', (e) => { setTimeout(() => { wr.children[0].style.display = "block" wr.children[1].style.display = "block" wr.children[2].style.display = "none" }, 300) }) }) .wrapper { background-color: red; width: 300px; box-shadow: 10px 5px 5px green; margin: 15px auto; padding: 30px; border-radius: 14px; transition: transform 1s, background-color 2s ease; display: flex; justify-content: space-between; text-align: right; align-items: center; flex-basis: 45%; line-height: 40px; } .wrapper:hover { transform: rotateY(180deg); background-color: rgba(224, 224, 224, 0.164); transition: transform 1s, background-color 2s ease-in-out; border: 1px solid black; } .wrapper img { background-color: rgba(224, 224, 224, 0.164); border-radius: $text; width: 80px; height: 80px; padding: 5px; margin-bottom: 10px; filter: invert(1); } .wrapper__title { font-size: $title3; } .wrapper__text { font-size: 30px; transform: rotateY(180deg); display: none; text-align: center; text-shadow: 1px 1px 3px white; } <div class="wrapper"> <div class="wrapper__img"><img src="https://klike.net/uploads/posts/2019-05/1556708032_1.jpg" alt=""></div> <div class="wrapper__title">НАЗВАНИЕ</div> <div class="wrapper__text" >ОПИСАНИЕ ОПИСАНИЕ ОПИСАНИЕ </div> </div>Incluso el usuario no mueve el mouse, se activa el evento "mouseout", porque su tarjeta se está encogiendo y moviéndose desde el puntero.
Agregue un envoltorio más con tamaño estático alrededor de su tarjeta y agregue sus eventos a este envoltorio.
Esto no resolverá todos sus problemas, pero al menos eliminará el parpadeo.
También es una buena idea deshacerse por completo de JS o al menos mover estilos a css y agregar clases.