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
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> 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?
<template> <div style="height: 100%;"> <mt-header title=""> <mt-button icon="back" slot="left" v-tap="{methods: switchView, view: Post }">< mt-button> &l...
in the process of using weui, how to find the html structure of this SearchBar after introducing cdn? Neither the rookie tutorial nor W3C says how to use SearchBar ...
$(document).ready(function(){ $(".pageloading").show(); $(window).on("load", function() { $(".pageloading").fadeOut(); }); }); google chrome can, will $( ".pageloading "). FadeOut (); but the safari networ...
there is such a requirement, as shown in the figure are four menu buttons. The four menu icons here are not vector icons similar to Font Awesome, but pictures in png format, namely f.png, u.png, s.png, and p.png. demand: clicking on the correspondi...
directly above the picture, how to take this top value ...
< H1 > problem description < H1 > while writing transition animation, I inadvertently found that sometimes the page would jam, and the Chrome memory of the viewing task manager suddenly soared. After various exclusions, I found that transform:skew (9...
dynamic effects that are often overlooked are so important to user experience design Animation effect is an unavoidable link in user experience design, while in mobile interaction, dynamic effect exists as a transition lubricant and an important lin...
@ media only screen and (min-width:320px) {html {font-size:12px;}} @ media only screen and (min-width:375px) {html {font-size:13px;}} @ media only screen and (min-width:412px) {html {font-size:14px;}} htmlrem1rembodypagepage1rem1rem16px1rem ...
use vue to do a nine-grid lucky draw, which is fast at the beginning, slow down after a few laps, and can control where to stop. There is a big lucky draw button in the middle of the prize. How to write the style, ask for advice ...
to write several mobile pages, you need to use the components provided by ant design mobile to develop. How to use this thing, the document doesn t understand much at first and which of the two ways mentioned above should be used, ah, to find a so...
1. First of all, I have declared my font 2. 3. . 4. However, the above problems only occur in chrome and Firefox, where special fonts are successfully rendered on Safari . ...
the only thing I can think of now is to save the current canvas to an array every time I finish drawing, and then take it out of the array when I undo it ...
.body { background-image:url("image 1.jpg"); } I have tried the following background-image:url ( "1.jpg "); background-image:url ( " image 1.jpg "); background-image:url ( ".. image 1.jpg "); background-image:url ( ".. .. image 1.j...
sometimes normal and sometimes abnormal, use document.body.scrollTop = document.body.scrollHeight;; on the contrary, input will not be pushed up. Can you give me some advice? Thank you when the keyboard pops up, there is a value in document.body....
hover flashes when you move it up. ...
Why ReactDOM.render () cannot render after the page jumps, and it has no effect Page code after jump import React,{Component}from react ; import ReactDOM from react-dom ; import { Flex, WhiteSpace,Button } from antd-mobile ; import U98 ...
the framework of react-based ant design mobile does not write Chinese text directly in the code, so where is the Chinese text written and how should it be used? ask for advice, one for beginners ...
recently encountered a problem, in the cat s eye movie official website to see the normal display of numbers on the page, but to check the source code is a white box, can anyone solve the problem? screenshots of some cat s eye movie pages: ...
use css3 to write a page animation, including width,height,translate,opacity, using chrome to view the number of frames is only 29fsMur31fs, occasionally some will be more than 50 frames, how to optimize to reach the number of 60 frames, and switch to so...
as shown in the picture, this is the menu of a background management system. After I clicked on the small menu, I was clicked to change the color, and only one changed the color at the same time. Ask for demo or link ...