这篇文章给大家分享了两个鼠标悬浮出现说明遮罩层的效果,大家可以根据自己的需要选择某一种效果,两种效果文中都给出了实例代码,下面来一起看看吧。
先来一个简单的实现方法:
<!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>
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
如何使用CSS的pointer-events属性实现鼠标穿透效果
以上是如何使用CSS实现鼠标悬浮出现遮罩层的详细内容。更多信息请关注PHP中文网其他相关文章!