Question

我想显示图像叠加效果，我的代码就是

jQuery("div.footer_recent_post ul li a img").each(function(){
    jQuery(this).mouseover(function(){
        jQuery('div.image-overlay').slideDown(500);
    });
});

<div class="image-overlay" style="display: block;"></div>
<div class"footer_recent_post">
    <ul>
      <li>
        <a>
          <img class="th wp-post-image" width="80" height="80" src="image-path">
        </a>
     </li>
   </ul>
 </div>

我有4个图像，当我将鼠标悬停在所有图像上的任何图像图像叠加div显示时，我想一个接一个，我该怎么办？

Answer 1

您可以使用 .closest() 在遍历DOM树时获取最接近的匹配.footer_recent_post祖先div。

之后，您可以应用 .prev() 来获取课程image-overlay的前一个兄弟姐妹：

jQuery("div.footer_recent_post ul li a img").each(function(){
    jQuery(this).mouseover(function(){
        jQuery(this).closest('.footer_recent_post').prev().slideDown(500);
    });
});

另请注意，您缺少=来在HTML标记中指定类名。它应该是class="footer_recent_post"而不是class"footer_recent_post"

目前，只有在鼠标悬停在图片上时才会处理此情况，您应该在鼠标移出时使用.mouseout()向上滑动内容：

jQuery("div.footer_recent_post ul li a img").each(function () {
    jQuery(this).mouseover(function () {
        jQuery(this).closest('.footer_recent_post').prev().slideDown(500);
    }).mouseout(function () {
        jQuery(this).closest('.footer_recent_post').prev().slideUp(500);
    });
});

您也可以使用.hover()和.slideToggle()缩短上述代码：

jQuery("div.footer_recent_post ul li a img").each(function () {
    jQuery(this).hover(function () {
        jQuery(this).closest('.footer_recent_post').prev().slideToggle(500);
    });
});

<强> Fiddle Demo

图像悬停效果在jquery中逐个显示

1 个答案: