html - using javascript container blinking and remove and add CSS classes at same time when hover over another child container

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="image176630.jpg" alt="">
        <div class="hover-div">
          <div class="item">
            <img src="imageactive-my-list.png" alt="">
            <img src="imageactive-favourite.png" alt="">
            <img src="imageactive-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="image176630.jpg" alt="" onmouseout="hideBottomCard()" onmouseover="showBottomCard()">
    <div class="hover-div">
      <div class="item">
        <img src="imageactive-my-list.png" alt="">
        <img src="imageactive-favourite.png" alt="">
        <img src="imageactive-watch-later.png" alt="">
      </div>
    </div>
</div>
<h5>2015 / Fiction, Drama</h5>
<h4>The Wolf Of Wall Street</h4>