Question

这是一些基本的jquery，但它不起作用。我对数据库中的每个视频都有描述。当你将鼠标悬停在信息按钮上时，每个视频的描述都应该淡入。非常不工作???为什么？

<script>
  $(document).ready(function(){
      $('.infoBtn').mouseenter(function(){
          $('.relatedVideoDescription', this).fadeIn();
      });
  });
  </script>

HTML

<div class="relatedvideo" style=" line-height: 138%;">
                    <div style="float: left; width: 38%;">
                        <img src="'.URL.'images/uploads/'.$img_url2.'" width="190px" />
                    </div><div class="relatedText">
                        <strong style="font-size: 12px;">'.$title2.'</strong><br />
                        <p class="relatedVideoDescription">'.$desc2.'</p>
                        <p class="infoBtn">info</p>
                    </div>
                    <br /><br /><br />
                <hr />
                </div>

.relatedVideoDescription设置为display：none;在CSS。

Answer 1

http://jsfiddle.net/7prVd/1/

$(document).ready(function(){
      $('.infoBtn').mouseenter(function(){
           $(this).closest('.relatedvideo').find('.relatedVideoDescription').fadeIn();
      });
});

<强>更新

或使用.siblings（），如Anton所说

http://jsfiddle.net/7prVd/2/

 $(document).ready(function(){
      $('.infoBtn').mouseenter(function(){
          $(this).siblings('.relatedVideoDescription').fadeIn();
      });
  });

我的jQuery代码有什么问题？

1 个答案: