ul li{
position: relative;/*让z-index命令起作用*/
width: 100px;
height: 200px;
border: hotpink 1px solid;
float: left;
list-style: none;
margin-left: -1px;/*避免了相邻两个盒子之间边框重叠的问题*/
}
li:hover{
border-color: khaki;
z-index: 1;
}
首先就是每个盒子在一行上显示。然后每次点击盒子的时候盒子本身的边框颜色会发生改变,起到一种提示的作用(表明现在鼠标正在这个盒子上面)。
给每个盒子加上了1px的边框线,这样就会使相邻两个盒子的边框重叠,变成2px。这明显是不符合项目要求的。此时最直接的解决方法就是给每个li添加margin-left:-1,这样在实际项目中就解决了这个问题。
其次是每次点击的时候会显示整个盒子四周的边框线,但这种情况下除了最后一个盒子可以显示完整的边框下意外,其余盒子是无法显示右边的边框线的,因为之前加了margin:-1,这个属性。上一个盒子右边框被后面盒子的左边框压住了,所以无法显示。此时在li上面添加一个相对定位,然后在伪类选择器上添加一个z-index属性就可以了。