相邻元素的层级（仿淘宝页面效果）

相邻的元素中，默认每个都有边框，当这些元素都浮动时，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 200px;
            height: 300px;
            border: 10px solid #ccc;
            float: left;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

 

效果如下：

pic01 

不防给元素设置margin-left属性，属性值为负数且等于border-width.这样每一个元素向左移动，后面的元素的左边框可以压住前一元素的右边框(见pic02)。

当我们鼠标移入一个元素时，为了让此元素的边框高亮显示，可以使用伪元素（见pic03）。

为了让此元素的所有边框高亮显示，需要在伪类中添加定位（relative）（见pic04）。

      　 div {
            width: 200px;
            height: 300px;
            border: 10px solid #ccc;
            float: left;
            margin-left: -10px;
        }
        div:hover {
            border-color: red;
            position: relative;
        }

效果图如下：

pic02  

 

pic03 

 

pic04 

 

若原来的元素已有定位（relative），需要在伪类中设置高一点的层级。

div {
            width: 200px;
            height: 300px;
            border: 10px solid #ccc;
            float: left;
            margin-left: -10px;
            position: relative;    /*若有此定位属性，默认有了层级的概念，值是0.为了效果显示出来，需要在伪类中设置高一点的层级*/
        }
        div:hover {
            border-color: red;
            position: relative;
            z-index: 1;    /*大于默认值0的数值即可*/
        }

 

posted @ 2016-07-26 13:57  cnjs  阅读(655)  评论(0)  编辑  收藏  举报