这篇文章给大家分享的是有关CSS如何实现鼠标悬浮出现遮罩层的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。先来一个简单的实现方法：代码如下:<!DOCTYPE html><html&nb
这篇文章给大家分享的是有关CSS如何实现鼠标悬浮出现遮罩层的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
先来一个简单的实现方法：
代码如下:
<!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> <div id="my-mask" class="mask-wrapper"> <p>Lorem ipsum</p> <div class="mask-inner"> <p>foo bar</p> </div></div></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> <div class="info">服装</div> </li> <li class="box"> <i class="shadow"></i> <i class="icon">B</i> <div class="info">鞋包</div> </li> <li class="box"> <i class="shadow"></i> <i class="icon">C</i> <div class="info">配饰</div> </li> <li class="box"> <i class="shadow"></i> <i class="icon">D</i> <div class="info">运动</div> </li> </ul></div></body></html>感谢各位的阅读！关于“CSS如何实现鼠标悬浮出现遮罩层”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
--结束END--
本文标题: CSS如何实现鼠标悬浮出现遮罩层
本文链接: https://www.lsjlt.com/news/255083.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0