这篇文章给大家分享了两个鼠标悬浮出现说明遮罩层的效果，大家可以根据自己的需要选择某一种效果，两种效果文中都给出了实例代码，下面来一起看看吧。
先来一个简单的实现方法：
nbsp;html>Document .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); }
Lorem ipsum
foo bar
登录后复制
来个更高级点的：
立即学习“前端免费学习笔记（深入）”；
nbsp;html>Document * { 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(http://xiaomingming.qiniudn.com/shadow.png) 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; }
服装
B
鞋包
C
配饰
D
运动
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
如何使用CSS实现鼠标上移图标旋转的效果
如何使用CSS实现鼠标上移图标旋转的效果
以上就是如何使用CSS实现鼠标悬浮出现遮罩层的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2896146.html
