这篇文章给大家分享了两个鼠标悬浮出现说明遮罩层的效果，大家可以根据自己的需要选择某一种效果，两种效果文中都给出了实例代码，下面来一起看看吧。
先来一个简单的实现方法：
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>document</title> <style type="text/css"> .mask-wrapper { position: relative; overflow: hidden; } .mask-inner { position: absolute; left: 0; top: 100%; width: 100%; height: 100%; -moz-transition: top ease 200ms; -o-transition: top ease 200ms; -webkit-transition: top ease 200ms; transition: top ease 200ms; } .mask-wrapper:hover .mask-inner { top: 0; } #my-mask { width: 300px; height: 200px; background: red; } #my-mask .mask-inner { background: rgba(0,0,0,.5); } </style></head><body> <p id="my-mask" class="mask-wrapper"> <p>lorem ipsum</p> <p class="mask-inner"> <p>foo bar</p> </p></p></body></html>
来个更高级点的：
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>document</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font: 12px/1.5 arail; } ul { list-style: none; } .icon-lists { overflow: hidden; background: #f7f7f7; padding: 40px; } .icon-lists .box { float: left; margin-right: 10px; } .box { position: relative; width: 46px; height: 46px; overflow: hidden; z-index: 1; } .box i, .box .info { display: block; width: 46px; height: 46px; border-radius: 46px; } .box .shadow { position: absolute; top: 0; z-index: 10; border-radius: 0; background: url(<a href="http://xiaomingming.qiniudn.com/shadow.png">http://xiaomingming.qiniudn.com/shadow.png</a>) no-repeat; } .box .icon { position: absolute; top: 0; line-height: 46px; text-align: center; background: #eee; color: #333; font-size: 14px; } .box .info { position: absolute; top: 46px; z-index: 2; background: orange; color: #fff; text-align: center; line-height: 46px; -webkit-transition:top .2s ease-in; -moz-transition:top .2s ease-in; transition:top .2s ease-in; } .box:hover>.info { top:0; }</p><p> </style></head><body> <ul class="icon-lists"> <li class="box"> <i class="shadow"></i> <i class="icon">a</i> <p class="info">服装</p> </li> <li class="box"> <i class="shadow"></i> <i class="icon">b</i> <p class="info">鞋包</p> </li> <li class="box"> <i class="shadow"></i> <i class="icon">c</i> <p class="info">配饰</p> </li> <li class="box"> <i class="shadow"></i> <i class="icon">d</i> <p class="info">运动</p> </li> </ul></p></body></html>
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
如何使用css实现鼠标上移图标旋转的效果
如何使用css的pointer-events属性实现鼠标穿透效果
以上就是如何使用css实现鼠标悬浮出现遮罩层的详细内容。