我想在悬停时显示卡片

Question

我想在鼠标悬停时显示卡片。我做了两个div，第一个是单专辑，另一个是隐藏。我使用+选择器，并对名为hide的div不显示任何内容。 但悬停效果不起作用。

<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>

Answer 1

JavaScript 将在 .single-album 元素上添加 mouseover 和 mouseout 事件侦听器，这将控制 .hide 元素的可见性。请将任何占位符文本或图像源替换为您的实际内容。

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>