javascript - 如何使图像蒙版出现在悬停时

Question

在我的网站上，我有一个带有用户照片的个人资料页面。当用户将鼠标悬停在他们的照片上时，我希望在图像上显示一个带有一些文本的透明 mask ，然后用户可以单击该 mask 来调出一个模态，用户可以在其中更新他们的个人资料图片。

我无法让它工作。演示如下:

 $(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');
});