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

【问题标题】：How to show image in div on hover with jquery?如何在使用 jquery 悬停时在 div 中显示图像？
【发布时间】：2017-12-30 19:47:41
【问题描述】：

我有功能列表，我需要在将鼠标悬停在带有图标和标题的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>

jquery:

 $('#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 上时，需要将其更改为图像。

【问题讨论】：

不要使用 id 使用类名。 ID 必须是唯一的。如果你使用 id 你只会得到第一个元素
id必须是每个元素唯一的，所以使用class
我的代码现在可以工作了，但是当我将鼠标悬停在“Web 开发”上时，div 图像出现在所有带有黄色背景的div's 上。但如果我将鼠标悬停在“Web 开发”div 上，我只需要在图像上显示图像，并且与其他带有黄色背景的div's 相同。

标签： jquery html css hover

【解决方案1】：

你应该把你的 img 与 css 属性类似

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

因此，当您将元素悬停时，您可能会在鼠标离开时 fadeToggle() 图像并 fadeToggle() 将其返回

【讨论】：