Loading

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

<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提高层级 */
       }

 

posted @ 2018-04-10 15:04  澎湃_L  阅读(630)  评论(0)  编辑  收藏  举报