在悬停时显示图像只是为了实际的悬停元素

Question

我在display:none;上使用.imageholder创建了一组这样的div：

<div class="parent">
<div class="imageholder">
    <img src="img.jpg">
</div>
<div class="parent">
    <div class="imageholder">
        <img src="img.jpg">
    </div>
</div>
<!--and so on...-->

和这个jQuery：

$('.parent').hover(
function() {
    $('.imageholder').fadeIn('slow');
},function() {
    $('.imageholder').fadeOut('slow');
}

）; 当我悬停.parent div时，所有相关的父div都显示图像。

如何让悬停状态仅适用于实际悬停的父元素？ 谢谢！

Answer 1

function () {
    $(this).find(".imageholder").fadeIn("slow");
}

您可以在this回调中使用.hover来引用悬停（父级）元素。

Answer 2

$('.parent').hover(function () {
    $(this).find(".imageholder").fadeIn("slow");
});

Answer 3

尝试this fiddle您可以使用.find（）方法指向div。

就像

一样

$(document).ready(function()
                  {
                      $('.parent').hover(function() {
                    $(this).find('.imageholder').fadeIn('slow');
              },function() {
                   $(this).find('.imageholder').fadeOut('slow');
              })
                  });