Javascript 如何使图像遮罩显示在悬停状态

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

我不能让它工作。演示如下：

$（文档）.ready（函数（）{
$（'.profile image'）.hover（函数（）{
$（'.mask layer'）.css（“可见性”、“可见”）；
}，函数（）{
$（'.mask layer'）.css（“可见性”、“隐藏”）；
});
});
.profile图像容器{
右边距：自动；
左边距：自动；
位置：相对位置；
}
.配置文件图像容器.配置文件图像{
边界半径：6px；
保证金：自动；
}
.配置文件图像容器.遮罩层{
位置：绝对位置；
左：0；
排名：0；
底部：0；
右：0；
背景色：rgba（0,0,0,0.3）；
边界半径：6px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
可见性：隐藏；
}
.配置文件图像容器.遮罩层跨度，
.配置文件图像容器.遮罩层i{
颜色：白色；
}

更新照片
如果您只想在用户启动时显示掩码，则无需使用javascript

鼠标悬停在图像上

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

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

并使
遮罩层
默认为
显示：无

只使用css怎么样：

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

我已经用上面的css更新了您的JSFIDLE，它不会闪烁


对于单击零件，请使用：

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

这很酷，可以解决闪烁问题，但是当我将光标悬停在文本上时，光标会发生什么变化呢。我需要将jquery事件挂接到单击掩码上，并且如果用户单击范围中的文本，我需要它工作，同时检查我的最新编辑。我没有放置
光标：指针，但这就是强制更改光标的方式。对于jQuery，在click上使用：
$（'.mask layer'）。on（'click'，function（e）{alert（e.target，'was clicked！'）；}
（我在注释中写了这个，所以布局不完全正确，但代码是您所需要的。好的，我已经将jQuery代码放在我的答案中，这样更容易阅读（并且修复了语法错误）