Jquery为fadeIn选择单个项目

Jquery select single item for fadeIn

本文关键字：单个 项目 选择 fadeIn Jquery      更新时间：2023-09-26

学习jquery。

目前我有这个代码：

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

显然不理想，因为我有一个.公文包部分的图像，但效果是应用于所有的图像一次。如何仅为效果选择当前悬停的项目？

要做到这一点，请确保单个img元素和.t缩略图覆盖都有一个共同的父元素。

像这样（母公司是.投资组合）：

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

现在，您可以使用$(this).closest('.portfolio').find('.thumbnail-overlay') 访问.缩略图覆盖

或者确保img元素是.t缩略图覆盖.的子元素

像这样：

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

或者这个：

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

然后使用$(this).closest('.thumbnail-overlay')获得.缩略图覆盖。

相关文章：