使用 jquery 悬停在 img 上的文本答案

【问题标题】：text over img hover with jquery使用 jquery 悬停在 img 上的文本
【发布时间】：2017-11-09 08:12:19
【问题描述】：

我是编码的初学者，我已经在这里搜索过，但我真的找不到解决问题的合适方法。

当我将鼠标悬停在图像上时，我试图让文本出现在图像的位置。不幸的是，必须使用 jQuery，我知道它可以通过使用 CSS 来完成。

到目前为止，我在这里找到了以下内容：

在头脑中：

<script>
 $(function(){
    $('.parent').mouseenter(function(){
        $(this).children('.child').fadeIn();
    }).mouseleave(function(){
        $(this).children('.child').fadeOut();
    });
});
</script>

在体内：

<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'/>
<div class='child'>
<p>Random text.</p>
</div>
</div>

CSS：

.parent
{
    position:relative;
}
.child
{
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: black;
    opacity: 0.5;
    padding:10px;

    display:none;
}

感谢您提供关于我做错了什么以及如何解决该问题的简单提示或解释。

编辑：

这是我的 PHP 文件中的完整代码：

    echo "
    <!DOCTYPE html>
    <html lang=\"en\">
    <head>
        <meta charset=\"UTF-8\">
        <title>Test Blog</title>    
     
    <script>
$(document).ready(function() {
    
      $('.gallery-item').hover(function() {
        $(this).find('.img-title').fadeIn(300);
      }, function() {
        $(this).find('.img-title').fadeOut(100);
      });
    
    });
    </script>
     
    </head>
    <body>
    
    
    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>
    
    
    <div class=\"wrapper clearfix\">
    
      <figure class=\"gallery-item\">
        <img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'>
        <figcaption class=\"img-title\">
          <h5>Random text.</h5>
        </figcaption>
      </figure>
    
    
    </div>

然后它继续通过下拉菜单路由到其他页面。 CSS 代码在我上面链接到的 CSS 文件中（链接是正确的，因为所有其他 CSS 代码都在工作）。

【问题讨论】：

标签： javascript jquery html css hover

【解决方案1】：

$(document).ready(function() {

  $('.gallery-item').hover(function() {
    $(this).find('.img-title').fadeIn(300);
  }, function() {
    $(this).find('.img-title').fadeOut(100);
  });

});

.gallery {
  width: 25em;
  margin: 2em auto;
}

.gallery-item {
  height: auto;
  width: 48.618784527%;
  float: left;
  margin-bottom: 2em;
  position: relative;
}

.gallery-item:first-child {
  margin-right: 2.762430939%;
}

.gallery-item img {
  width: 100%;
}

.gallery-item:hover .img-title {}

.img-title {
  position: absolute;
  top: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  text-align: center;
  display: none;
  background-color: #333;
}

.img-title h5 {
  position: absolute;
  color: #fff;
  top: 33%;
  width: 100%;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="wrapper clearfix">

  <figure class="gallery-item">
    <img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'>
    <figcaption class="img-title">
      <h5>Random text.</h5>
    </figcaption>
  </figure>



</div>

【讨论】：

谢谢，我已经有了这个解决方案。但它是针对 uni 的，这个解决方案不被接受，因为我们必须使用 JavaScript。
我编辑了我的答案，这是您要找的吗？
谢谢，是的，这就是我要找的东西，但是如果我将它复制到我的 PHP 文件中，我似乎无法让它工作。我将用我的完整代码更新我的帖子我想我必须以某种不同的方式实现它。
你的css/js文件在你的html页面中吗？
我刚刚用我的文件现在的样子编辑了我的帖子。

【解决方案2】：

希望对你有所帮助。

$(function(){
    $('.parent').mouseenter(function(){
        //alert();
        $(this).children('.child').show().fadeIn(200);//have some timeout for fading in
    }).mouseleave(function(){
        $(this).children('.child').fadeOut(400);
    });
});

.parent
{
    position:relative;
}
.child
{
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: black;
    opacity: 1.0;
    padding:10px;
    display:none;
    /*
    add width and height attribute to the elem
    */
    width:100%;
    height:300px;
    color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'/>
<div class='child'>
<p>Random text.</p>
</div>
</div>

【讨论】：

谢谢。如果我在这里运行 sn-p 就可以了，但是当我复制 PHP 风暴文档中的所有内容时，它就不管用了。所以要明确一点：我将第一个 sn-p 添加到我的文档头部的

【解决方案3】：

你必须定义overly的大小——我用下面的位置设置做到了。另外，我删除了不透明度设置。不知道你还想要什么，但基本上它现在可以工作了。

$(document).ready(function() {
  $('.parent').mouseenter(function() {
    $(this).children('.child').fadeIn();
  }).mouseleave(function() {
    $(this).children('.child').fadeOut();
  });
});

.parent {
  position: relative;
}

.child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: black;
  padding: 10px;
  display: none;
}

.child p {
  color: white;
  text-align: center;
  margin-top: 100px;
  font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
  <img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image' />
  <div class='child'>
    <p>Random text.</p>
  </div>
</div>

【讨论】：

谢谢。如果我在这里运行 sn-p 就可以了，但是当我复制 PHP 风暴文档中的所有内容时，它就不起作用了。所以要明确一点：我将第一个 sn-p 添加到
是的，这也是这些 sn-ps 的工作方式。基本上，你应该设置父容器的大小，所以当你给它“宽度：100％和”高度：100％”（作为一个绝对定位的元素，它需要有一个尺寸，在我的 sn-p 中，我将其替换为 top/bottom/left/right = 0 设置。）