htmlcsscss-selectorsmousehoveronhover

I want to display card on hover


I want to display card on mouse-hover .I made two div first one is single-album and the other one is hide .I used + selector and give 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>