Question

我已经花了30分钟在S.O上寻找解决方案，但仍然无法找到解决方案。可能是因为我不知道到底要找什么。

基本上我有div包含和图像和文本。只有在我悬停在图像上后，文本才会出现在图像上。 HTML和CSS结构都很好，我在hover函数上遇到了JQuery的问题，主要是知道如何选择内部div（而不是实际上如何使用hover函数本身）。

我尝试做的是当我将鼠标悬停在图像div（img-container）上时，它会在该图像上显示文字（hover-img）。

以下是我的代码：

HTML

<div id="content" class="col-12">
  <!-- Image Gallery -->
  <div class="col-lg-4 col-md-6 col-xs-12 img-container">
    <img class="img-gal" src="#" />


    <div class="hover-img">
      <p class="img-text">Text on Hover</p>
    </div>
  </div>
</div

CSS

.img-container{
  float:left;
  margin: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
}

.img-gal{
  width: 100%;
  height: auto;
  position: relative;
}

.hover-img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index:10;
  color: #fff;
  display: none;
}

.img-text{
  text-align: center;
  position: relative;
  top: 50%;
  font-weight: 300;
  font-size: 1em;
  letter-spacing: 2px;
}

JS

//Hover Image. Need to show the Text when hovering on an image
$('.img-container').hover(function(){
  //Stuck here. How to show the text? fadeIn()? But what?
},function(){
  //Stuck here. How to show the text? fadeOut()? But what ?
});

由于

Answer 1

您可以使用纯CSS实现此目的：

.hover-img {
  display: none;
  position: absolute;
  top: 0;
}

.img-gal:hover ~ .hover-img, .hover-img:hover {
  display: block;
}

<div id="content" class="col-12">
  <!-- Image Gallery -->
  <div class="col-lg-4 col-md-6 col-xs-12 img-container">
    <img class="img-gal" src="https://www.gravatar.com/avatar/0104050baad43a135d1084a1b3ec35d4?s=32&d=identicon&r=PG&f=1" />


    <div class="hover-img">
      <p class="img-text">Text on Hover</p>
    </div>
  </div>
</div

Answer 2

您只能使用CSS执行此操作。将此行添加到您的css

.img-gal:hover + .hover-img {
    display:block;
}

如果你想平滑效果，请将此行添加到.hover-img。并删除display:none

  .hover-img {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }

并且像这样的图像悬停

.img-gal:hover + .hover-img {
        visibility: visible;
        opacity: 1;
}

Answer 3

正如其他人提到的，这里不需要jQuery，您只能使用html / css，使用css过渡以及更改文本图层的不透明度和位置来实现此目的。

https://jsfiddle.net/86bjzedh/

检查这个小提琴是否有实际的例子

CSS：

.gallery li {
  overflow: hidden;  
  background-size: 100% 100%;
  float: left;
  display: block;
  width: 200px;
  height: 200px;
  margin: 5px;
}

.gallery span {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateY(100%);
  transition: .3s linear all;
  text-align: center;
  color: #000;
  font-size: 15px;
  font-family: tahoma;
  background-color: rgba(255, 255, 255, .8);
  padding-top: 30px;
  box-sizing: border-box;
}

.gallery li:hover span {
  transform: translateY(0);
  opacity: 1;
}

HTML：

<ul class="gallery">
  <li style="background-image:url(https://cdn.pixabay.com/photo/2018/01/17/10/22/key-3087900__180.jpg)">
    <span>Style 1</span>
  </li>
    <li style="background-image:url(https://cdn.pixabay.com/photo/2018/02/16/02/03/pocket-watch-3156771__180.jpg">
    <span>Style 2</span>
  </li>
      <li style="background-image:url(https://cdn.pixabay.com/photo/2018/04/20/02/47/hong-kong-3334945__180.jpg)">
    <span>Style 2</span>
  </li>
<li style="background-image:url(https://cdn.pixabay.com/photo/2018/01/17/10/22/key-3087900__180.jpg)">
    <span>Style 1</span>
  </li>
    <li style="background-image:url(https://cdn.pixabay.com/photo/2018/02/16/02/03/pocket-watch-3156771__180.jpg">
    <span>Style 2</span>
  </li>
      <li style="background-image:url(https://cdn.pixabay.com/photo/2018/04/20/02/47/hong-kong-3334945__180.jpg)">
    <span>Style 2</span>
  </li>  
</ul>

在图像上显示div悬停Jquery

3 个答案: