某东侧边快捷按钮小案例

某东效果：

 

简易实现效果：

P.S：图片不是重点....

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
    <style type="text/css">
        body{
            padding: 0px;
            margin: 0px;
            font-family: "华文行楷";
        }
        .st-1{
            width: 35px;
            height: 35px;
            background-color: #666;
            position: relative;
            left: 95%;
            top: 100px;
            border-radius:6px;
            margin-top: 4px;
        }
        img{
            margin: 8px;
        }

        .st-1:hover{
            background:pink;
            border-radius: 0 6px 6px 0;
        }
        .st-1:hover div{
            height: 35px;
            width: 75px;
            background: pink;
            position: absolute;
            left: -72px;
            top:0px;
            border-radius:6px 0 0 6px;
        }
        .st-1:hover div:after{
            display: block;
            color: #666;
            content: "购物车";
            padding: 10px;
        }
    </style>
<body>
    <div class="st">
        <div class="st-1">
            <img src="1.jpg" />
            <div></div>
        </div>
        <div class="st-1">
            <img src="2.jpg" />
            <div></div>
        </div>
        <div class="st-1">
            <img src="3.jpg" />
            <div></div>
        </div>
        <div class="st-1">
            <img src="4.jpg" />
            <div></div>
        </div>
        <div class="st-1">
            <img src="5.jpg" />
            <div></div>
        </div>
    </div>
</body>
</html>

 

posted @ 2016-03-04 20:57  嘆世殘者——華帥  阅读(218)  评论(0)  编辑  收藏  举报