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

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

您可以在 .hover 回调中使用 this 来引用悬停的(父)元素。