仅在未悬停的图像中显示叠加

在这里，当我将鼠标悬停在某个图像上时，我想仅在那些未悬停的图像上显示此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>

你有一个良好的开端。您所需要的只是团队成员拥有position:relative，以使每个img-overlay都拥有正确的位置。
然后将不透明度设置为 1 默认情况下，并在悬停时将其更改为 0。
就这样。

.img-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 210px;
  width: 100%;
  opacity: 1;                       /* changed */
  transition: .5s ease;
  background: rgba(255, 255, 255, 0.6);
}
.team-member {                      /* new */
  position:relative;
}
.team-member:hover .img-overlay {   /* new */
  opacity:0;
}

<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>
<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>

一种解决方案可能是在悬停父div 时隐藏覆盖，例如

$("div.col-xs-3").on('hover', function(){  
    $(this).find('.img-overlay').first().hide();
});

相关内容

最新更新

热门标签：