在这里，当我将鼠标悬停在某些图像上时，我想仅在那些未悬停的图像上显示此 img-overlay(将不透明度更改为 1)。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.img-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 210px;
width: 100%;
opacity: 0;
transition: .5s ease;
background:rgba(255,255,255,0.6);
}
</style>
</head>
<body>
<div class="row" style="margin-bottom:20px;">
<div class="col-xs-3">
<div class="team-member">
<div class="img-overlay"></div>
<img src="https://www.w3schools.com/html/pulpitrock.jpg" class="img-responsive" alt="Aarya Guta">
<h4 class="team-title" style="color: #404444;">Zero</h4>
</div>
</div>
<div class="col-xs-3">
<div class="team-member">
<div class="img-overlay"></div>
<img src="https://www.w3schools.com/html/pulpitrock.jpg" class="img-responsive" alt="Aarya Guta">
<h4 class="team-title" style="color: #404444;">one</h4>
</div>
</div>
<div class="col-xs-3">
<div class="team-member">
<div class="img-overlay"></div>
<img src="https://www.w3schools.com/html/pulpitrock.jpg" class="img-responsive" alt="Aarya Guta">
<h4 class="team-title" style="color: #404444;">two</h4>
</div>
</div>
<div class="col-xs-3">
<div class="team-member">
<div class="img-overlay"></div>
<img src="https://www.w3schools.com/html/pulpitrock.jpg" class="img-responsive" alt="Aarya Guta">
<h4 class="team-title" style="color: #404444;">Three</h4>
</div>
</div>
</div>
</body>
</html>最佳答案
将这些脚本和样式添加到您的代码中
<script>
jQuery(".team-member").mouseover(function(){
jQuery(".img-overlay").addClass("overlay-in");
jQuery(this).addClass("current");
});
jQuery(".team-member").mouseleave(function(){
jQuery(".img-overlay").removeClass("overlay-in");
jQuery(this).removeClass("current");
});
</script>
<style>
.img-overlay.overlay-in{ opacity:1; }
.team-member.current .img-overlay{ opacity:0!important; }
</style>
关于jquery - 仅在未悬停的图像中显示叠加层，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49229737/