在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML5  HTML/ 京東 我的購(gòu)物車 css如何實(shí)現(xiàn)

京東 我的購(gòu)物車 css如何實(shí)現(xiàn)

圖片描述

主要問(wèn)題是， 彈出框的上邊框如何隱藏一部分，我的想法是， 在彈出時(shí)， 設(shè)置‘我的購(gòu)物車’所在的邊框的底邊框?yàn)?，調(diào)整z-index， 使‘我的購(gòu)物車’所在的框覆蓋到下面的邊框， 從而實(shí)現(xiàn)這種效果， 但是不行， 不知道各位有沒(méi)有好的解決辦法。 謝謝啦

回答
編輯回答
朕略傻

圖片描述

你好，我的思路如下，有不清楚的歡迎交流。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .box{
        width: 100px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #ccc;
        text-align: center;
        font-size: 14px;
        position: relative;
    }
    .box:after{
        content: "";
        height: 1px;
        width: 100%;
        background-color: #fff;
        position: absolute;
        bottom: -1px;
        left: 0;
        display: none;
    }
    .con{
        height: 100px;
        width: 300px;
        border: 1px solid #ccc;
        display: none;
        position: absolute;
        left: -1px;
    }
    .box:hover:after{
        display: block;
    }
    .box:hover .con{
        display: block;
    }
    </style>
</head>
<body>
    <div class="box">
        <span>我的購(gòu)物車</span>
        <div class="con">
            購(gòu)物車的內(nèi)容
        </div>
    </div>
</body>
</html>
2018年2月22日 08:45
編輯回答
尕筱澄

emmm，典型的前端騙術(shù)，根本就沒(méi)有你說(shuō)的要隱藏的部分，它本身就是在一個(gè)盒子下的兩個(gè)盒子，但是通過(guò)css讓你看上去他們是聯(lián)在一起的，
思路的話，無(wú)非就是上邊的盒子在觸發(fā)的時(shí)候，改變邊框樣式，下邊兒的盒子定位在他距離底部1px的位置，并提高3維顯示層級(jí)，看上去的話，就變成了聯(lián)在一起的樣子了。
套路就是這樣，直接給你代碼，我覺(jué)得對(duì)你沒(méi)啥好處，23333

2017年7月23日 16:54
編輯回答
骨殘心

你可以直接打開(kāi)開(kāi)發(fā)者工具看他怎么寫(xiě)的。

2017年10月19日 23:41