Question

我是一名完整的编码初学者，我已经在这里搜索过但我无法找到解决问题的正确方法。当我用鼠标悬停在图像上时，我试图让文本出现在图像的位置。不幸的是必须使用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代码都正常工作）。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

希望它可以帮助你。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

img悬停在jquery上的文本

3 个答案: