Remove event handling on further hover-CodePudding

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.

enter link description here 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)
    })
})

CodePudding user response：

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 >
        <div ><img src="https://klike.net/uploads/posts/2019-05/1556708032_1.jpg" alt=""></div>
        <div >НАЗВАНИЕ</div>
        <div  >ОПИСАНИЕ ОПИСАНИЕ ОПИСАНИЕ </div>
    </div>

CodePudding user response：

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.