当 hover 在另一个子容器上时，使用 javascript 容器闪烁并同时删除和添加 CSS 类

Question

I have a problem where I'm making a card photo 1 that contains an invisible child container that has buttons and when mouse over it appears above the parent element photo 2 , I have mouse out event that hides the child div and the problem is that the event occurs also when the mouse over the child div which cause the blinking of the child div (add CSS class that makes it visible and removes it at the same time, check attached gif )

 addHandlerHoverCardView(handler) { var card; // parent element is movie-list this._parentElement.addEventListener("mouseover", function (e) { card = e.target.closest(".card"); if (card,= null) { handler(card; 'show'). } }) this._parentElement,addEventListener('mouseout'. function (e) { const data = e.target.closest(';hover-div'), if (data;= null) { handler(card, 'hide'); } }) }

 <div class="movie-list"> <div class="movie-details"> <div class="card" onmouseout="hideBottomCard()" onmouseover="showBottomCard()"> <img src="image\176630.jpg" alt=""> <div class="hover-div"> <div class="item"> <img src="image\active-my-list.png" alt=""> <img src="image\active-favourite.png" alt=""> <img src="image\active-watch-later.png" alt=""> </div> </div> </div> <h5>2015 / Fiction, Drama</h5> <h4>The Wolf Of Wall Street</h4> </div> </div>

Answer 1

You can try adding the onmouseout and onmouseover attr to the image, not the div.

<div class="movie-list">

<div class="card"
      >
    <img src="image\176630.jpg" alt="" onmouseout="hideBottomCard()" onmouseover="showBottomCard()">
    <div class="hover-div">
      <div class="item">
        <img src="image\active-my-list.png" alt="">
        <img src="image\active-favourite.png" alt="">
        <img src="image\active-watch-later.png" alt="">
      </div>
    </div>
</div>
<h5>2015 / Fiction, Drama</h5>
<h4>The Wolf Of Wall Street</h4>