jquery匹配触发事件的div的孩子答案

【问题标题】：jquery match child of div that triggered eventjquery匹配触发事件的div的孩子
【发布时间】：2012-10-07 00:44:32
【问题描述】：

我正在尝试创建一个画廊/轮播小部件，如果该特定图像有鼠标悬停事件，它将在每个图像上显示一个 div。到目前为止，我有这段代码来显示 div：

$(document).ready(function(){

  $(".background").mouseover(function(){
    $(".info").show(1500);
  });
  $(".background").mouseout(function(){
     $(".info").hide(1500);
  });
});

和 html 明智

<div id="wrapper">
<div id="slides">
    <ul>
         <li>
        <img class="background" src="images/1.png" width="240" height="240"/>
             <div class="info">Thats the info of this image</div>
    </li>
        <li>
               <img src="images/ogm.png" width="240" height="240"/>
                    <div class="info">Thats the info of this image</div>
        </li>
        <li><img src="images/2.jpg" width="240" height="240"/>
                 <div class="info">Thats the info of this image</div>
        </li>
        <li>
            <img src="images/3.png" width="240" height="240"/>
                 <div class="info">Thats the info of this image</div>
        </li>
        <li>
            <img src="images/4.png" width="240" height="240"/>
                 <div class="info">Thats the info of this image</div>
       </li>
        <li>
            <img src="images/5.png" width="240" height="240"/>
                 <div class="info">Thats the info of this image</div>
        </li>
    </ul>
</div>

info 是 div，背景是图像的类

正如预期的那样，当鼠标悬停在任何图像上时，所有信息 div 都会匹配并出现。

是否可以只显示触发鼠标悬停的背景图像中包含的特定信息div？

【问题讨论】：

标签： jquery jquery-selectors

【解决方案1】：

您为 jQuery 绑定函数提供的回调是作为引发事件的元素的上下文 (this) 提供的。所以你可以从$(this)搜索你的'.info'：

$(document).ready(function(){
  $(".background").mouseover(function(){
    $(this).parent().find(".info").show(1500);
  });
  $(".background").mouseout(function(){
     $(this).parent().find(".info").hide(1500);
  });
});

或者（雷纳托的建议）：

$(document).ready(function(){
  $(".background").mouseover(function(){
    $(this).sibblings(".info").show(1500);
  });
  $(".background").mouseout(function(){
     $(this).sibblings(".info").hide(1500);
  });
});

注意 jQuery 允许链接：

$(document).ready(function(){
  $(".background").mouseover(function(){
    $(this).parent().find(".info").show(1500);
  }).mouseout(function(){
     $(this).parent().find(".info").hide(1500);
  });
});

另请注意，您通常需要mouseenter 和mouseleave 而不是mouseover 和mouseout。

【讨论】：

你可以用siblings()代替parent().find()
是的，没错。我会放一个带有兄弟姐妹的替代版本。

【解决方案2】：

使用下一个图像将解决问题。

$(document).ready(function(){
  $(".background").mouseover(function(){
    $(this).next().show(1500); // show div next to img
  });
  $(".background").mouseout(function(){
     $(this).next().hide(1500); // hide div next to img
  });
});

【讨论】：