Как реализовать активное\не активное состояние карточки товара?

const card = document.getElementsByClassName('card-no-active')
const more_cards = document.getElementsByClassName('card-active')

for (let i = 0; i < card.length; i++) {
  card[i].addEventListener('mouseover', function() {
    for (let j = 0; j < card.length; j++) {
      if (i === j) {
        more_cards[j].classList.remove('d-none')
      }

    }
  });

  card[i].addEventListener('mouseout', function() {
    for (let j = 0; j < card.length; j++) {
      more_cards[j].classList.add('d-none')
    }
  });
}

<div class="card-no-active">
  <img src="/comfort/img/nothing.webp" alt="" class="rounded-4 w-100">

  <div class="d-flex mt-2">

    <p class="fs-5" style="font-weight: 600">
      Какая-то вещь
    </p>

    <div class="ms-auto">
      <img src="/comfort/icons/heart-svgrepo-com.svg" alt="">
    </div>

  </div>

  <div class="d-flex">
    <p class="fw-bold h4">
      Цена 1
    </p>
    <p class="fs-6 text-danger text-decoration-line-through ms-4 mt-1">
      Цена 2 по скидке
    </p>
  </div>

  {# АКТИВНОЕ СОСТОЯНИЕ КАРТОЧКИ #}
  <div class="border-top border-1 position-absolute d-none card-active">
    <p class="fw-bold mt-2">Размеры</p>

    <div class="d-flex fw-bold d-grid gap-3 text-center ms-2">

      <div>
        <p>150 см</p>
        <p class="fw-light fw-lighter mt-0">Длина</p>
      </div>

      <div>x</div>

      <div>
        <p>75 см</p>
        <p class="fw-light fw-lighter">Ширина</p>
      </div>

      <div>x</div>

      <div>
        <p>55 см</p>
        <p class="fw-light fw-lighter">Высота</p>
      </div>

    </div>

    <button class="bg-dark text-white w-100 border-0 rounded-3 fs-6" style="height: 35px">Купить</button>
  </div>

</div>