如何使图像蒙版显示在悬停状态
提问于 2016-07-27 01:17:02
在我的网站上，我有一个用户照片的个人资料页面。当用户将鼠标悬停在他们的照片上时，我想要一个带有一些文本的透明蒙版出现在图像上，然后用户可以单击它来带来一个模式，在那里用户可以更新他们的个人资料图片。
我不能让它工作。Demo如下：
$(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。
在我的网站上，它看起来更好，蒙版实际上位于图像的中心。但它还是会闪现。
这也是重要的，我希望光标始终显示为一个链接。目前，当用户将鼠标悬停在文本上时，光标会变为文本栏，我不希望出现这种情况。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-07-27 01:26:20
如果只使用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');
});Stack Overflow用户
发布于 2016-07-27 01:24:29
如果您只想在用户的
鼠标悬停在图像上
这是演示。基本上，我只是添加了另一个css规则
.profile-image-container:hover .mask-layer {
display: flex;
}并将mask-layer默认设置为display: none
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38602230
复制相关文章
点击加载更多
腾讯云开发者
