jquery - 如何使用 jquery 在悬停时在 div 中显示图像？

Question

我有功能列表，我需要在鼠标悬停在带有图标和标题的 div 上显示图像(代码中的 .top-wrapper 类)。现在我有一些 jquery 代码，但它适用于悬停时的所有元素，我需要它单独处理每个元素。

HTML:

<ul class="row features-list justify-content-center justify-content-md-between justify-content-lg-center">
            <li class="col-xl-3">
                <img src="images/features-card-img.png" alt="Bottle">
                <div class="d-flex flex-column bottle-text-wrapper arrow-up text-left mx-auto">
                    <h3 class="features-item-header bottle-header">Redesigning With Personality</h3>
                    <span class="bottle-small-text ml-auto">in <span class="yellow-text">web design</span></span>
                </div>
            </li>
            <li class="col-10 col-sm-6 col-md-5 col-lg-4 col-xl-3 feature-item">
                <div class="feature-top" id="feature-top-dev">
                    <div class="top-wrapper">
                    <i class="fa fa-desktop" aria-hidden="true"></i>
                    <h3 class="features-item-header">Web Development</h3>
                    </div>
                    <div class="hover-content">
                        <img src="images/features-card-img.png" alt="Bottle">
                    </div>
                </div>
                <div class="feature-bottom mx-auto">
                    <p class="features-text">Lorem ipsum dolor sit amet,
                        consectetur.</p>
                </div>
            </li>
            <li class="col-10 col-sm-6 col-md-5 col-lg-4 col-xl-3 feature-item">
                <div class="feature-top" id="feature-top-design">
                    <div class="top-wrapper">
                    <i class="fa fa-th" aria-hidden="true"></i>
                    <h3 class="features-item-header">Web Design</h3>
                    </div>
                    <div class="hover-content">
                        <img src="images/features-card-img.png" alt="Bottle">
                    </div>
                </div>
                <div class="feature-bottom mx-auto">
                    <p class="features-text">Lorem ipsum dolor sit amet,
                        consectetur.</p>
                </div>
            </li>
            <li class="col-10 col-sm-6 col-md-5 col-lg-4 col-xl-3 feature-item">
                <div class="feature-top" id="feature-top-graph-des">
                    <div class="top-wrapper">
                    <i class="fa fa-pencil" aria-hidden="true"></i>
                    <h3 class="features-item-header">Graphic Design</h3>
                    </div>
                    <div class="hover-content">
                        <img src="images/features-card-img.png" alt="Bottle">
                    </div>
                </div>
                <div class="feature-bottom mx-auto">
                    <p class="features-text">Lorem ipsum dolor sit amet,
                        consectetur.</p>
                </div>
            </li>
        </ul>
    </div>

j查询:

 $('#feature-top-dev').hover(
        function() {
            $('.top-wrapper').addClass('d-none');
            $('.feature-top').css({'padding': '0', 'background-color': '#f5f5f5'});
            $('.hover-content').fadeIn('slow');
        },function() {
            $('.top-wrapper').removeClass('d-none');
            $('.feature-top').css({'padding': '20px 0', 'background-color': '#ffea00'});
            $('.hover-content').fadeOut('slow');
        }
    );

屏幕截图:

将鼠标悬停在黄色背景的 div 上，需要将其更改为图像。

Answer 1

你应该把你的 img 和 css 属性放在一起

img.hover {
  position: absolute;
  top: 0px;
  left: 0px;
  display: none;
  width: 100%;
}

所以当你悬停你的元素时，你可能会 fadeToggle() 你的图像并在鼠标离开时 fadeToggle() 它回来