Question

我正在尝试创建一个图库/轮播窗口小部件，如果该特定图像有鼠标悬停事件，则会在每个图像上显示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？

Answer 1

您为jQuery绑定函数提供的回调是作为上下文（this）提供事件的元素。因此，您可以从'.info'

中搜索$(this)

$(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。

Answer 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
  });
});

jquery匹配触发事件的div的子项

2 个答案: