陈华:淘宝同学左侧导航栏div鼠标上浮边框变色无遮挡处理方法

来源:互联网 发布:淘宝高仿nike鞋店推荐 编辑:程序博客网 时间:2024/04/30 13:15


LESS源码:

div{ width: 300px; height: 100px; border: 1px solid #CCC; margin:-1px; display: block; position: relative;&:hover{border: 1px solid red; z-index:2 }}

CSS部分:
div{ width: 300px; height: 100px; border: 1px solid #CCC; margin:-1px; display: block; position: relative;}div:hover{border: 1px solid red; z-index:2 }

HTML部分:
<div></div><div></div><div></div>

首先用 margin:-1px; 解决边框间重叠问题
其次用 z-index:2 解决鼠标上浮边框遮挡问题

0 0
原创粉丝点击