Question

在我的网站上，我有一个包含用户照片的个人资料页面。当用户将鼠标悬停在他们的照片上时，我想要一个透明的遮罩，在图像上方会显示一些文字，然后用户可以点击这样就会显示用户可以更新其个人资料照片的模式。

我无法让它发挥作用。演示如下：

 $(document).ready(function() {

   $('.profile-image').hover(function() {
     $('.mask-layer').css("visibility", "visible");
   }, function() {
     $('.mask-layer').css("visibility", "hidden");
   });


 });

.profile-image-container {
  margin-right: auto;
  margin-left: auto;
  position: relative;
}
.profile-image-container .profile-image {
  border-radius: 6px;
  margin: auto;
}
.profile-image-container .mask-layer {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
}
.profile-image-container .mask-layer span,
.profile-image-container .mask-layer i {
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="profile-image-container">
  <img class="profile-image" src=http://nineplanets.org/images/earth.jpg alt="Profile img 0313">
  <div class="mask-layer">
    <div class="update-pic">
      <span>Update Photo</span>
    </div>
  </div>
</div>

这是我的jsfiddle。

在我的网站上看起来更好，面具实际上位于图像的中心。但它仍然闪烁。

这一点很重要，我希望光标始终显示为链接。目前，当用户将鼠标悬停在文本上时，光标会变为文本栏，我不希望这样。

Answer 1

如何使用css：

.mask-layer{
  visibility: hidden:
}
.profile-image:hover mask-layer{
  visibility: visible;
  cursor: pointer;
}

我已经用上面的css更新了你的jsfiddle并且它没有闪现。

http://jsfiddle.net/fcfj0y3a/3/

对于您的点击部分，请使用：

$('.mask-layer').on('click', function(e) {
  alert(e.target, 'was clicked');
});

Answer 2

如果您只是想在用户

时显示掩码，则无需使用javascript

鼠标悬停在图像上

这是演示。基本上，我只是添加了另一个css规则

.profile-image-container:hover .mask-layer {
  display: flex;
}

并将mask-layer默认设为display: none

demo

如何在悬停时显示图像蒙版

2 个答案: