javascript - 悬停在图片上时显示说明

Question

我有 12 个带有图片和隐藏描述的元素。当我将鼠标悬停在图片上时，它会显示描述。比图片和描述在固定区域有一些背景颜色，但描述下方的图片是可见的，很难阅读描述。显示描述时如何完全覆盖下面的图片？假设图片是 200x200 像素，所以我想从图片顶部覆盖 50 像素。

代码如下:

$(document).ready(function() {
  $('.box').hover(function() {
    $(this).find('.details').show(500);
    $(this).addClass('higlighted');
    $(this).find('.details').css('visibility', 'visible');
  }, function() {
    $(this).find('.details').css('visibility', 'hidden');
    $(this).removeClass('higlighted');
  })
});

.products {
  max-width: 1200px !important;
}

.products-description h1 {
  font-family: 'Homenaje', sans-serif;
  font-size: 50px;
  padding-bottom: 40px;
  padding-top: 2em;
}

.products-description p {
  font-family: 'Mada', sans-serif;
  font-weight: 300;
  font-size: 22px;
  padding-bottom: 3em;
}

.box {
  margin-top: -5em;
}

.box .imgBox {
  padding-top: 2em;
  position: relative;
}

.box .details {
  transition: 0.5s;
  visibility: hidden;
}

.box .details p {
  font-size: 14px;
  color: #ffffff;
}

.higlighted {
  background: rgba(98, 192, 23);
  position: absolute;
  transition: 0.5s;
  cursor: pointer;
}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<div class="row products">
  <div class="col-lg-1 box" id="box">
    <div class="imgBox">
      <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
    </div>
    <div class="details" id="details">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
    </div>
  </div>
  <div class="col-lg-1 box">
    <div class="imgBox">
      <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
    </div>
    <div class="details">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
    </div>
  </div>
  <div class="col-lg-1 box">
    <div class="imgBox">
      <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
    </div>
    <div class="details">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
    </div>
  </div>
  <div class="col-lg-1 box">
    <div class="imgBox">
      <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
    </div>
    <div class="details">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
    </div>
  </div>
</div>
<div class="row products">
  <div class="col-lg-1 box" id="box">
    <div class="imgBox">
      <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
    </div>
    <div class="details" id="details">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
    </div>
  </div>
  <div class="col-lg-1 box">
    <div class="imgBox">
      <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
    </div>
    <div class="details">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
    </div>
  </div>
  <div class="col-lg-1 box">
    <div class="imgBox">
      <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
    </div>
    <div class="details">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
    </div>
  </div>
  <div class="col-lg-1 box">
    <div class="imgBox">
      <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
    </div>
    <div class="details">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
    </div>
  </div>
</div>

Answer 1

唯一需要编辑的是 .highlighted 类的 CSS 和小的 JQuery 脚本。

你可以了解更多z-index here :

.higlighted {
  background: rgba(98, 192, 23);
  position: absolute;
  transition: 0.5s;
  cursor: pointer;
  z-index: 1;
}

我已经使用您的逻辑来满足您的需求，即通过切换 imgBox 的 css 可见性类。

<script>
    $(document).ready(function() {
  $('.box').hover(function() {
    $(this).find('.details').show(500);
    $(this).addClass('higlighted');
    $(this).find('.details').css('visibility', 'visible');
    $(this).find('.imgBox').css('visibility', 'hidden');
  }, function() {
    $(this).find('.details').css('visibility', 'hidden');
    $(this).find('.imgBox').css('visibility', 'visible');
    $(this).removeClass('higlighted');
  })
});
</script>