foverIn / fadeOut悬停不起作用

Question

我的网站上有一些带有css不透明度动画的图像，我想在悬停时在每个图像上显示文字。

这是我的HTML：

  <div class="gallery">
  <div class="container">
    <div class="row">
      <div class="col-sm-7">
        <img src="http://www.theblogazine.com/wp-content/uploads/2014/04/20140414-The-Blogazine-Salone-Goodbye-03.jpg" class="img-responsive">
        <h2 id="img-title">Projekt 1<h2>
    </div>
    <div class = "col-sm-5">
    <img src="http://24.media.tumblr.com/fbcca32890631d26020608e240fe4602/tumblr_mn4xq4ntLI1qkjjfoo1_500.gif" class="img-responsive">
    <h2 id = "img-title">Projekt 2<h2>
    </div>
    </div>
    <div class = "row">
    <div class = "col-sm-5">
    <img src="http://45.media.tumblr.com/1b793888369840a9e1b9f2f739d32767/tumblr_nuofw201Uk1safpwto1_500.gif" class="img-responsive">
    <h2 id = "img-title">Projekt 3<h2>

    </div>
    <div class = "col-sm-3">
    <img src="http://ecx.images-amazon.com/images/I/41zONV6q4OL._SY450_.jpg" class="img-responsive">
    <h2 id = "img-title">Projekt 4<h2>

    </div>
    <div class = "col-sm-4">
    <img src="http://www.themekongclub.com/wp-content/uploads/2015/08/10.jpg" class="img-responsive">
    <h2 id = "img-title">Projekt 5<h2>

    </div>
    </div>

这是我的jQuery（我想先尝试一张图片）：

$(document).ready(function() {
    $('col-sm-7').hover(
        function(){
            $(this).find("#img-title").fadeIn(250);
        },
        function(){
            $(this).find("#img-title").fadeOut(250);
        }
    );
};

有人可以解释一下我做错了吗？

Answer 1

您的HTML标记有几个问题，

• <h2>没有正确关闭
• ID #必须是唯一的
• div没有很好地关闭（或在错误的地方关闭） - 如果我按你的意愿做了标记，请告诉我。

另外你的JS也有错误，例如：

• $('col-sm-7')应为$('.col-sm-7')
• 已切换fadeIn/fadeOut，因为已显示.img-title，因此fadeIn上的hover无法执行任何操作

所以这是一个完整的片段：

段

＆＃13;

＆＃13;

$('.col-sm-7').hover(
  function() {
    $(this).find('.img-title').fadeOut(250);
  }, function() {
    $(this).find('.img-title').fadeIn(250);
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="gallery">
  <div class="container">
    <div class="row">
      <div class="col-sm-7">
        <img src="http://www.theblogazine.com/wp-content/uploads/2014/04/20140414-The-Blogazine-Salone-Goodbye-03.jpg" class="img-responsive" />
        <h2 class="img-title">Projekt 1</h2>

        <div class="col-sm-5">
          <img src="http://24.media.tumblr.com/fbcca32890631d26020608e240fe4602/tumblr_mn4xq4ntLI1qkjjfoo1_500.gif" class="img-responsive" />
          <h2 class="img-title">Projekt 2</h2>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-5">
          <img src="http://45.media.tumblr.com/1b793888369840a9e1b9f2f739d32767/tumblr_nuofw201Uk1safpwto1_500.gif" class="img-responsive" />
          <h2 class="img-title">Projekt 3</h2>
        </div>
        <div class="col-sm-3">
          <img src="http://ecx.images-amazon.com/images/I/41zONV6q4OL._SY450_.jpg" class="img-responsive" />
          <h2 class="img-title">Projekt 4</h2>
        </div>
        <div class="col-sm-4">
          <img src="http://www.themekongclub.com/wp-content/uploads/2015/08/10.jpg" class="img-responsive" />
          <h2 class="img-title">Projekt 5</h2>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

更新 OP的评论

  

它完全搞砸了我的画廊

因此，使用自己的未触及的HTML标记（仅修复<h2>未关闭，您必须将#更改为.类，因为ID是独特的。），这是一个片段：

段

＆＃13;

＆＃13;

$('#proj-1,#proj-2,#proj-3,#proj-4,#proj-5').hover(
  function() {
    $(this).find('.img-title').fadeOut(250);
  }, function() {
    $(this).find('.img-title').fadeIn(250);
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="gallery">
  <div class="container">
    <div class="row">
      <div id="proj-1" class="col-sm-7">
        <img src="http://www.theblogazine.com/wp-content/uploads/2014/04/20140414-The-Blogazine-Salone-Goodbye-03.jpg" class="img-responsive">
        <h2 class="img-title">Projekt 1</h2>
      </div>
      <div id="proj-2" class="col-sm-5">
        <img src="http://24.media.tumblr.com/fbcca32890631d26020608e240fe4602/tumblr_mn4xq4ntLI1qkjjfoo1_500.gif" class="img-responsive">
        <h2 class="img-title">Projekt 2</h2>
      </div>
    </div>
    <div class="row">
      <div id="proj-3" class="col-sm-5">
        <img src="http://45.media.tumblr.com/1b793888369840a9e1b9f2f739d32767/tumblr_nuofw201Uk1safpwto1_500.gif" class="img-responsive">
        <h2 class="img-title">Projekt 3</h2>

      </div>
      <div id="proj-4" class="col-sm-3">
        <img src="http://ecx.images-amazon.com/images/I/41zONV6q4OL._SY450_.jpg" class="img-responsive">
        <h2 class="img-title">Projekt 4</h2>

      </div>
      <div id="proj-5" class="col-sm-4">
        <img src="http://www.themekongclub.com/wp-content/uploads/2015/08/10.jpg" class="img-responsive">
        <h2 class="img-title">Projekt 5</h2>

      </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在选择器中有一些错误，即使你没有关闭h2。你需要使用不同的ID。 工作演示https://jsfiddle.net/AlexanderPatel/4vffxqb7/1/

$(function () {
		$('.col-sm-7').hover(
        function(){
            $(this).find("h2").fadeIn(250);
        },
        function(){
            $(this).find("h2").fadeOut(250);
        }
    );
})

img{
  max-width: 100px;
}

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

<div class = "gallery">
  <div class = "container">
    <div class = "row">
      <div class = "col-sm-7">
        <img src="http://www.theblogazine.com/wp-content/uploads/2014/04/20140414-The-Blogazine-Salone-Goodbye-03.jpg" class="img-responsive">
        <h2>Projekt 1</h2>
      </div>
<div class = "col-sm-5">
<img src="http://24.media.tumblr.com/fbcca32890631d26020608e240fe4602/tumblr_mn4xq4ntLI1qkjjfoo1_500.gif" class="img-responsive">
<h2>Projekt 2</h2>
</div>
</div>
<div class = "row">
<div class = "col-sm-5">
<img src="http://45.media.tumblr.com/1b793888369840a9e1b9f2f739d32767/tumblr_nuofw201Uk1safpwto1_500.gif" class="img-responsive">
<h2>Projekt 3</h2>

</div>
<div class = "col-sm-3">
<img src="http://ecx.images-amazon.com/images/I/41zONV6q4OL._SY450_.jpg" class="img-responsive">
<h2>Projekt 4</h2>

</div>
<div class = "col-sm-4">
<img src="http://www.themekongclub.com/wp-content/uploads/2015/08/10.jpg" class="img-responsive">
<h2>Projekt 5</h2>

</div>
</div>