Question

当我将鼠标悬停在某些图像上时，我想将这个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>

Answer 1

将这些脚本和样式添加到您的代码中

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

Answer 2

你有个好的开始。您需要的只是让position:relative img-overlay让每个.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; }拥有正确位置的团队成员然后默认设置不透明度1，并在悬停时将其更改为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>

    [OperationContract]
        [WebInvoke(Method = "POST", UriTemplate = "AddHCPRankAttachment", RequestFormat =
WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped)]
        WSMessage AddHCPRankAttachment(HCPRankAttachmentEnt HCPAttachment, byte[] ImageInBytes);

Answer 3

一个解决方案可能是在父div被悬停时隐藏叠加，例如

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

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

3 个答案: