我看不懂这份菜单,希望有人能帮我。
我有一个div,它是悬停的,我试图让它显示几个菜单选项(尽管在这个例子中只有一个)。但是一旦光标离开主btn,菜单就会折叠回来。
有人能帮帮忙吗?
.upload-image {
width: 50px;
height: 50px;
background: #333;
border-radius: 25px;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
-webkit-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
-moz-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
-o-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
z-index: -3000;
}
.upload-media:hover .upload-image {
-webkit-transform: translate(40px,-45px);
-moz-transform: translate(40px,-45px);
-o-transform: translate(40px, -45px);
-ms-transform: translate(40px,-45px);
transform: translate(40px,-45px);
}
.upload-media {
width: 50px;
height: 50px;
background: #ff5fa7;
border-radius: 25px;
-webkit-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
left: 50%;
top:50px;
position: relative;
}
.upload-media::after {
content: " ";
position: absolute;
display: block;
background-color: #fff;
height: 4px;
margin-top: -2px;
top: 50%;
left:15px;
right:15px;
z-index: 9;
border-radius: 5px;
}
.upload-media::before {
content: " ";
position: absolute;
display: block;
background-color: #fff;
width: 4px;
margin-left: -2px;
left: 50%;
top: 15px;
bottom: 15px;
z-index: 9;
border-radius: 5px;
}
<div class="upload-media">
<div class="upload-image">
</div>
</div>
https://stackoverflow.com/questions/51314178
复制相似问题