悬停在图片上时显示说明

时间：2019-03-19 10:29:53

标签： javascript html css

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

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)


我可以为您提供我刚刚写的解决方案。

我没有编辑您的代码，因为代码段似乎充满了错误，无论如何我的代码都可以满足您的要求。

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    
    .assume-im-img {
      position: absolute;
      width: 150px; height: 150px;
      background-color: #000;
      z-index: 1;
    }

    .assume-im-img:hover {
      cursor: pointer;
      z-index: 3;
    }

    .assume-im-img:nth-of-type(1) {
      top: 0;
    }
    
    .assume-im-img:nth-of-type(2) {
      top: 200px;
    }

    .assume-im-img:nth-of-type(3) {
      top: 400px;
    }

    .im-img-desc-container {
      position: absolute;
      width: 100%; height: 250px;
      background-color: #99ff99;
      z-index: 0;
      visibility: hidden;
    }

    #desc-1 {
      top: 0;
    }

    #desc-2 {
      top: 200px;
    }
    
    #desc-3 {
      top: 400px;
    }

    .desc-shown {
      visibility: visible;
      z-index: 2;
    }

    .im-img-desc {
      position: absolute;
      bottom: 2.5%; left: 0;
      width: 100%; height: 50px;
    }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready( function() {
      $(document).on('mouseover', '.assume-im-img', function (e) {
        $('#desc-' + $(this).attr('target')).addClass('desc-shown');
      });

      $(document).on('mouseleave', '.assume-im-img', function (e) {
        $('#desc-' + $(this).attr('target')).removeClass('desc-shown');
      });
    });
  </script>
</head>
<body>
  <div class = "assume-im-img" target = 1>IMG 1</div>
  <div class = "assume-im-img" target = 2>IMG 2</div>
  <div class = "assume-im-img" target = 3>IMG 3</div>
  <div id = "desc-1" class = "im-img-desc-container">
    <p class = "im-img-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </div>
  <div id = "desc-2" class = "im-img-desc-container">
    <p class = "im-img-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is just a simple text placeholder, Enjoy lorem ipsum!</p>
  </div>
  <div id = "desc-3" class = "im-img-desc-container">
    <p class = "im-img-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum very long story and we haven't time to tell it whole.</p>
  </div>
</body>
</html>

相关问题
最新问题