CSS样式-z-index练习

练习题：当鼠标hover到每个div上时，div的边框颜色变为淘宝红
 
<!DOCTYPE html>
<html lang="en">
<head>
 
    <title>Document</title>
    <style type="text/css">
        .container {
            width: 1010px;
　　　/*消除浮动*/
            overflow: hidden;
            margin: 200px auto;
            padding: 1px;
        }

 

        .container div {
            width: 250px;
            height: 420px;
            border: 1px solid #ccc;
            float: left;
            margin-left: -1px;
　　　/*设置position: relative后，z-index才会生效（备注：position: relative和float: left;是可以同时设置的）*/
            position: relative;
        }

 

        .container div:hover {
            border-color: #ff8000;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

 

posted @ 2021-03-20 21:55  #Friday  阅读(64)  评论(0)    收藏  举报