当我将鼠标悬停在第一个图像上时，它会发生变化，第二个 div 图像也会发生变化，当我将鼠标悬停在第一个 div 图像上时，这个过程会发生变化并使用 jQuery 自行改变吗？
点击此链接 https://www.studioairport.nl/并转到认识我们的团队内容
.our-team{
border: 1px solid #d3d3d3;
position: relative;
overflow: hidden;
}
.our-team img{
width: 100%;
height: auto;
}
.our-team .team-content{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 45px 18px;
background: rgba(0,0,0,0.7);
transform: translateX(-100%);
transition: all 0.20s ease 0s;
}
/*.our-team:hover .team-content{
transform: translateX(0);
}*/
.our-team .team-content .post-title{
font-size: 18px;
color: #fff;
text-transform: uppercase;
}
.our-team .team-content .post{
font-size: 14px;
color: #cb95e1;
display: block;
margin-bottom: 20px;
}
.our-team .description{
font-size: 14px;
line-height: 25px;
color: #fff;
margin-bottom: 20px;
}
.our-team .team_social{
margin:0;
padding:0;
list-style: none;
}
.our-team .team_social li{
display: inline-block;
margin-right: 5px;
}
.our-team .team_social li a{
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid #f5f5f5;
font-size: 17px;
color: #f5f5f5;
line-height: 40px;
text-align: center;
display: inline-block;
transition: border 0.3s ease 0s;
}
.our-team .team_social li a:hover{
border-color: transparent;
}
.our-team .team-prof{
width: 100%;
position: absolute;
bottom: 0;
text-align: right;
padding: 20px 16px;
background: rgba(0,0,0,0.7);
transform: translateX(0);
transition: all 0.20s ease 0s;
}
/*.our-team:hover .team-prof{
transform: translateX(100%);
}*/
.our-team .team-prof .post-title{
font-size: 18px;
color: #fff;
margin: 0 0 8px 0;
text-transform: uppercase;
}
.our-team .team-prof .post{
font-size: 14px;
color: #cb95e1;
margin-bottom: 0;
}
@media only screen and (max-width: 990px) {
.our-team{ margin-bottom: 20px; }
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="our-team">
<img class="xyz" src="http://jqueryrain.com/tutorial/our-team/demo30/images/img-2.jpg" alt="">
<div class="team-content">
<h3 class="post-title">Williamson</h3>
<span class="post">Web Desginer</span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio exercitationem facilis laborum perferendis quasi, ratione.
</p>
<ul class="team_social">
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
</ul>
</div>
<div class="team-prof">
<h3 class="post-title">Williamson</h3>
<span class="post">Web Desginer</span>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="our-team">
<img src="http://jqueryrain.com/tutorial/our-team/demo30/images/img-1.jpg" alt="">
<div class="team-content">
<h3 class="post-title">Williamson</h3>
<span class="post">Web Desginer</span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio exercitationem facilis laborum perferendis quasi, ratione.
</p>
<ul class="team_social">
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
</ul>
</div>
<div class="team-prof">
<h3 class="post-title">Williamson</h3>
<span class="post">Web Desginer</span>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-6">
<div class="our-team">
<img src="http://jqueryrain.com/tutorial/our-team/demo30/images/img-1.jpg" alt="">
<div class="team-content">
<h3 class="post-title">Williamson</h3>
<span class="post ">Web Desginer</span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio exercitationem facilis laborum perferendis quasi, ratione.
</p>
<ul class="team_social">
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
</ul>
</div>
<div class="team-prof">
<h3 class="post-title">Williamson</h3>
<span class="post">Web Desginer</span>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="our-team">
<img src="http://jqueryrain.com/tutorial/our-team/demo30/images/img-1.jpg" alt="">
<div class="team-content">
<h3 class="post-title">Williamson</h3>
<span class="post">Web Desginer</span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio exercitationem facilis laborum perferendis quasi, ratione.
</p>
<ul class="team_social">
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
</ul>
</div>
<div class="team-prof">
<h3 class="post-title">Williamson</h3>
<span class="post">Web Desginer</span>
</div>
</div>
</div>
</div>
</div>最佳答案
您可以将它与简单的内联 javascript 一起使用
<img src="http://jqueryrain.com/tutorial/our-team/demo30/images/img-1.jpg" alt="" onmouseover="this.src='http://jqueryrain.com/tutorial/our-team/demo30/images/img-2.jpg'" onmouseout="this.src='http://jqueryrain.com/tutorial/our-team/demo30/images/img-1.jpg'">
或者使用 jquery
<img src="http://jqueryrain.com/tutorial/our-team/demo30/images/img-1.jpg" alt="" data-hover-src="this.src='http://jqueryrain.com/tutorial/our-team/demo30/images/img-2.jpg'" data-normal-src="this.src='http://jqueryrain.com/tutorial/our-team/demo30/images/img-1.jpg'">
$("img")
.on( "mouseenter", function() {
$(this).attr("src", $(this).data('hover-src'));
})
.on( "mouseleave", function() {
$(this).attr("src", $(this).data('normal-src'));
});
关于jquery - 如何在悬停时更改图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41611929/