鼠标经过提高层级案例（margin，相对定位，z-index）

最新推荐文章于 2022-05-16 21:41:45 发布

weixin_30916125

最新推荐文章于 2022-05-16 21:41:45 发布

阅读量233

点赞数

原文链接：http://www.cnblogs.com/EricZLin/p/8779180.html

版权

<body>
    <ul>
        <li class="box1">1</li>
        <li class="box2">2</li>
        <li class="box3">3</li>
        <li class="box4">4</li>
    </ul>
</body>

<style>
        ul {
            height: 400px;
            width: 808px;
            margin: 0 auto;
        }
       li {
           width: 200px;
           height: 400px;
           border: 1px solid #000;
           float: left;
           list-style: none;
       }
    </style>

这样写完之后，会发现中间边框明显更粗，因为是两个盒子的边框并在一起。

解决方法是设置负的margin值

       .box2, .box3, .box4 {
           margin-left: -1px;/*边框变成细线*/
       }

然后我们设置鼠标经过盒子的样式，会发现，有盒子边框有一边不会变色

解决方法是：使用相对定位可以解决，如果li本身就具有定位，这时候可以使用z-index提高层级

li:hover {
           border: 1px solid rgb(52, 9, 209);/*鼠标经过前面三个盒子边框有一边不会变色*/
           position: relative;/*使用相对定位可以解决*/
           /* z-index: 1;如果li本身就具有定位，这时候可以使用z-index提高层级 */
       }

转载于:https://www.cnblogs.com/EricZLin/p/8779180.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30916125

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标经过提高层级案例（margin，相对定位，z-index）

<body> <ul> <li class="box1">1</li> <li class="box2">2</li> <li class="box3">3</li> <li class="box4">4&...
复制链接

扫一扫