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>

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

访问 .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>

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

Jquery为fadeIn选择单个项目

1 个答案: