在图像上显示div hover Jquery

I've spent a good 30 minutes on S.O to find a solution but still can't find it. Probably due to the fact that I don't know exactly what to look for.

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

Basically I have div which contains and image and a text. The text should appear on the image only after I hover on the image. The HTML and CSS structures are all good and I'm having problem with the JQuery on hover function, mainly to know how to select the inner div (and not actually how to use the hover function itself).

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

What I'm trying to do is when I hover on an image div (img-container), it shows the text (hover-img) on that image.

我想要做的是当我将鼠标悬停在图像div(img-container)上时,它会在该图像上显示文本(hover-img)。

Below are my code:

以下是我的代码:

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

//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 ?
});

Thanks

3 个解决方案

#1

You can achieve this with pure CSS:

您可以使用纯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

#2

As other mentioned, no need for jQuery here, you can achieve this with html/css only, using css transition and by changing the opacity and position of the text layer.

正如其他人提到的,这里不需要jQuery,你可以只用html / css,使用css过渡和改变文本层的不透明度和位置来实现。

https://jsfiddle.net/86bjzedh/

check this fiddle for a working example

检查这个小提琴的工作实例

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>

#3

You do this only with CSS. Add this line to your css

你只用CSS做到这一点。将此行添加到您的CSS

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

if you want to smooth effect add this line to .hover-img. and remove display:none

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

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

and on image hover like this

并在图像上悬停这样的

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

#1