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

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


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部分:

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

你可能感兴趣的:(编程日志)