如何使用jquery在div上显示div中的图像?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用jquery在div上显示div中的图像?相关的知识,希望对你有一定的参考价值。
我有功能列表,我需要显示图像悬停在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上时,需要将其更改为图像。
答案
你应该把你的img与css属性一样
img.hover {
position: absolute;
top: 0px;
left: 0px;
display: none;
width: 100%;
}
所以当你悬停你的元素时,你可以fadeToggle()你的图像和fadeToggle()它可以在鼠标离开时返回
以上是关于如何使用jquery在div上显示div中的图像?的主要内容,如果未能解决你的问题,请参考以下文章
jquery悬停列表项并在另一个div中显示图像,列表是动态的
如何使用 jQuery 客户端上传图像并将其添加到 div?