1

我正在尝试创建一个画廊/轮播小部件，如果该特定图像有鼠标悬停事件，它将在每个图像上显示一个 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 和 background 是图像的类

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

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

4

2 回答 2

4

您提供给 jQuery 绑定函数的回调作为 context ( 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而不是mouseoverand mouseout。

于 2012-10-06T16:26:02.517 回答
1

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

$(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
  });
});
于 2012-10-06T16:36:29.823 回答