问题引入
逛电脑端淘宝的时候我们经常可以看到随着我们的鼠标移动 会出现这样的效果——
出现了一个框框!
如何做到这个框框 相信大家也都轻车熟路
使用ul li:hover;再设置边框的颜色
但是如果在盒子紧贴在一起的时候
我们如果只是简单地使用如上的方法
会出现什么样的效果呢?
我们简单举例来探索一下
举例探索
初步解决方法
使用如上代码 创造出紧贴在一起的几个盒子
当我们简单地添加
之后,效果——
诶。。蓝色边框没惹 那咋办嘛
利用定位 我们有两个手段来解决这个问题。
改进方法一
盒子没有定位——
鼠标经过的时候添加相对定位即可~
相对定位占有位置!一定要用相对定位 来压住其他标准流(或者浮动)的盒子~
改进方法二
盒子都有定位——
如果盒子给了一个相对定位怎么办呐。。
现在 每个盒子都是相对的了!
必须要加层级!
鼠标经过li时 将z-index设为1即可~
效果
通过方法一和方法二 效果是一样的
如下~
达成目的~