如何让图像蒙版出现在悬停上

在我的网站上，我有一个用户照片的个人资料页面。当用户将照片悬停在他们的照片上时，我想要一个带有一些文字的透明遮罩，以便用户可以点击该图像，以显示用户可以更新其个人资料图片的模式。如何让图像蒙版出现在悬停上

我不能得到它的工作。演示低于：

$(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。

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

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

来源

2016-07-27 user4584963

怎么样只用CSS：

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

我已经更新您的jsfiddle与上面的CSS，它不会闪烁。

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

为每次点击的一部分，使用：

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

来源

2016-07-27 01:26:20 4lackof

凉，解决了闪烁，但什么光标变化，当我将鼠标悬停在文本。我需要钩住一个jQuery事件来点击蒙版，如果用户点击范围内的文本以及我需要它工作 – user4584963

请查看我的最新编辑。我没有把'cursor：pointer;'放在jsfiddle中，但这就是你强制改变光标的方法。（'click'，function（e）{alert（e.target，'was clicked！'）;}'（我是点击事物，对于jQuery使用：'$（'。mask-layer'）。在评论中写这个，所以布局不完全正确，但代码是你所需要的。 – 4lackof

好吧我已经把jQuery代码放入我的答案中，所以它更容易阅读（并且语法错误已修复） – 4lackof

没有必要使用JavaScript，如果你只是想显示蒙当用户的

鼠标在图像

这里徘徊的演示。基本上，我只需要添加另一个CSS规则

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

，使mask-layer默认display: none

demo

来源

2016-07-27 01:24:29 Even

如何让图像蒙版出现在悬停上

回答

相关问题