JD.com, how to realize my shopping cart css

the main problem is how to hide part of the top border of the pop-up box. My idea is that when popping up, set the bottom border of the frame where"my shopping cart"is located to 0, and adjust the zMaiindex, so that the box of"my shopping cart "covers the lower border, so as to achieve this effect, but no, I don"t know if you have a good solution. Thank you

Html5 css
Jun.14,2021

Hello, my ideas are as follows, there is no clear welcome to communicate. 

<!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 -sharpccc;
        text-align: center;
        font-size: 14px;
        position: relative;
    }
    .box:after{
        content: "";
        height: 1px;
        width: 100%;
        background-color: -sharpfff;
        position: absolute;
        bottom: -1px;
        left: 0;
        display: none;
    }
    .con{
        height: 100px;
        width: 300px;
        border: 1px solid -sharpccc;
        display: none;
        position: absolute;
        left: -1px;
    }
    .box:hover:after{
        display: block;
    }
    .box:hover .con{
        display: block;
    }
    </style>
</head>
<body>
    <div class="box">
        <span></span>
        <div class="con">
            
        </div>
    </div>
</body>
</html>
The typical front-end scam of

emmm, has nothing to hide at all. It itself is two boxes under the same box, but it makes you look like they are connected through css. The idea of
is that when the upper box is triggered, the border style is changed, and the lower box is positioned at his position away from the bottom 1px, and the 3D display level is improved. It becomes connected. The
routine is like this. I don't think it will do you any good if I give you the code directly. 23333

you can directly open the developer's tool and see how he writes it.

Previous: How to trigger the setting function of local mobile phone by js

Next: How does div automatically stretch the width beyond the parent?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu