admin 管理员组

文章数量: 1087677

css 鼠标划过显示遮罩

1.html结构 用一个父元素div把原有的和要遮罩的包起来

<div class="content"><div class="touxiang">这是头像</div><div class="genghuan">遮罩层</div></div>

2.写样式

注意点：父元素的大小跟头像(这里指鼠标滑过之前的元素)大小一样

给遮罩层设置属性opacity: 0;让他不显示

.content{//父元素width: 100px;height: 100px;position: relative;}
.touxiang{ //头像width: 100px;height: 100px;background: blue;color: #fff;border-radius: 50%;text-align: center;line-height: 100px;}
.genghuan{ //遮罩层width: 100px;height: 100px;color: #fff;border-radius: 50%;text-align: center;line-height: 100px;background: rgba(0, 0, 0, .5);position: absolute;top: 0;left: 0;opacity: 0;//透明度为0 不显示遮罩层}

3.划过显示

重点来了！！！

给父元素设置划过 然后父元素划过的时候遮罩层显示

遮罩层透明度为 1 ，这样遮罩层就显示出来啦

 .content:hover .genghuan{opacity: 1;}

本文标签： css 鼠标划过显示遮罩

版权声明：本文标题：css 鼠标划过显示遮罩 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1700276503a376039.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。