htmlcsscss-selectorsmousehoveronhover

Display a card on hover

I am looking to display a card on mouse-hover. I made two divs. The first one is single-album and the other one is hide. I used the + selector and gave display none to the div named hide.

But the hover effect didn't work.

<div class="row">
  <div class="col-12">
    <!-- Single Album -->
    <div class="single-album">
      <img src="img/book-imgs/DH.jpg" alt="">
      <div class="album-info">
        <a href="#">
          <h5>HORROR</h5>
        </a>
        <p>Dark House</p>
      </div>
    </div>
  </div>
</div>

<div class="row hide">
  <div class="col-lg-12">
    <div class="card mb-3" style="max-width: 540px;height:240px">
      <div class="row g-0">
        <div class="col-md-4">
          <img src="img/book-imgs/NHrt.jpg" class="img-fluid rounded-start" alt="...">
        </div>
        <div class="col-md-8">
          <div class="card-body">
            <h5 class="card-title">NHRT</h5>
            <p class="card-text">This is a wider card with supporting text below as a. lead-in to additional content. This content is a little bit longer.
            </p>
            <button class="ba-btn">Download</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Solution

  • The JavaScript will add event listeners for mouseover and mouseout on the .single-album element, which will control the visibility of the .hide element. Please replace any placeholder text or image sources with your actual content.

    document.addEventListener("DOMContentLoaded", function() {
      const singleAlbum = document.querySelector('.single-album');
      const hideElement = document.querySelector('.hide');

      singleAlbum.addEventListener('mouseover', function() {
        hideElement.style.display = 'block';
      });

      singleAlbum.addEventListener('mouseout', function() {
        hideElement.style.display = 'none';
      });
    });
    .hide {
      display: none;
    }
    <div class="row">
  <div class="col-12">
    <!-- Single Album -->
    <div class="single-album">
      <img src="img/book-imgs/DH.jpg" alt="">
      <div class="album-info">
        <a href="#">
          <h5>HORROR</h5>
        </a>
        <p>Dark House</p>
      </div>
    </div>
  </div>
</div>

<div class="row hide">
  <div class="col-lg-12">
    <div class="card mb-3" style="max-width: 540px;height:240px">
      <div class="row g-0">
        <div class="col-md-4">
          <img src="img/book-imgs/NHrt.jpg" class="img-fluid rounded-start" alt="...">
        </div>
        <div class="col-md-8">
          <div class="card-body">
            <h5 class="card-title">NHRT</h5>
            <p class="card-text">This is a wider card with supporting text below as a lead-in to additional content. This content is a little bit longer.</p>
            <button class="ba-btn">Download</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>