There is a sign that changes on hover. but the problem is that if you point at it and touch another block inside, it continues to work. Tell me what and where you need to add / change so that it works correctly: When you hover over a card (it did a rotation once), and when you remove the cursor from it, it returns to its previous position.
Here is the link for the whole code
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)
})
})
You have your issue because of the forEach loop. The problem was because your event was called on each element having the wrapper class, and because of that it was called more and more.
Just remove it, and use querySelector instead of querySelectorAll.
Also, as mentioned in the comment section, use mouseenter and 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>Even the user do not move the mouse, the "mouseout" event is triggered, because your card is shrinking and moving from the pointer.
Add one more wrapper with static size around your card and add your events to this wrapper.
This will not solve all you problems, but at least will remove flickering.
It is also a good idea to completely get rid of JS or at least move styles to css and add classes.