蒙层效果的不同实现方法

我们可以用css和jquery两种方法实现蒙层效果

效果图如下

第一种是使用css实现:

html代码：
<div id="list"><div class="list_"><img src="img/UCLA孤独量表 @2x.png"/><div class="list_nav"><b>UCLA孤独量表</b><p>123</p></div><div class="mask"><p class="mask_title">UCLA孤独量表</p><a class="mask_btn">立即参与</a></div></div> </div>
css样式代码：
#list{position:relative;width: 1200px;margin: 0 auto;text-align: center;}.list_{display: inline-block;position: relative;cursor: pointer; }.list_ img{height: 190px;margin:18px 1% 1% 1%;}.list_nav b{font-size: 16px;color: #484848;margin-left:0px;}.mask{width: 100%;height: 100%;position: absolute;top: 0px;display:none;background-color: rgba(0,0,0,0.5);color: #EEEEEE;font-size: 20px;}.mask_title{margin-top:20%;text-align: center;}.mask_btn{display: inline-block;text-decoration: none;color: #eee;width: 100px;height: 28px;line-height: 28px;font-size: 14px;text-align: center;border-radius:14px;background: #5691fe;list-style: none;cursor: pointer;margin-top: 20px;}

css实现蒙层代码：

.list_:hover .mask{ display: block; }

第二种是使用jquery实现:

jquery实现蒙层代码：

$('.list_').hover(function(){ $(this).find('.mask').slideDown() },function(){ $(this).find('.mask').slideUp() })

转载于:https://www.cnblogs.com/susu0110/p/10782316.html