javascript - Jquery为fadeIn选择单个项目

Question

学习jquery。

目前我有这段代码：

$(document).ready(function() {

    $('.portfolio img').mouseover(function() {
        console.log('hover succes');
        $('.thumbnail-overlay').fadeIn();
    }).mouseout(function() {
        $('.thumbnail-overlay').fadeOut();
    })

});

显然不理想，因为我有一个带有图像的 .portfolio 部分，但效果会立即应用于所有图像。如何仅获取为效果选择的当前悬停项目？

Answer 1

为了能够做到这一点，请确保单个img元素和.thumbnail-overlay都有一个共同的父元素。

像这样（父母是.portfolio）：

<div class="portfolio">
    <div class="thumbnail-overlay"></div>
    <img>
</div>

现在您可以使用.thumbnail -overlay访问$(this).closest('.portfolio').find('.thumbnail-overlay')

或者确保img元素是.thumbnail-overlay的子元素。

像这样：

<div class="portfolio">
    <div class="thumbnail-overlay">
        <img>
    </div>
</div>

或这个：

<div class="thumbnail-overlay">
    <div class="portfolio">
        <img>
    </div>
</div>

然后使用.thumbnail-overlay 获取.thumbnail-overlay$(this).closest('.thumbnail-overlay')。