悬停时展开向下按钮
提问于 2021-01-21 14:26:32
我有一个简单的扩展按钮。它在顶部展开，但我希望它向下展开。我正在尝试用位置做一些事情，但是我不能得到没有js和动画的我怎么做。
.outer-bottomleft {
position: absolute;
bottom: 20%;
left: 2%;
display: flex;
color: black;
flex-direction: row;
}
.outer-bottomleft .bottomleft {
display: none;
}
.outer-bottomleft:hover .bottomleft {
display: flex;
}
.outer-bottomleft:hover .hide-button {
display: none;
}
.shop-button-left {
width: 50%;
}
.shop-button-right {
width: 50%;
} <div class ="outer-bottomleft"> <span class ="hide-button btn-shop">SHOP
</span>
<div class="bottomleft"> <div class = "shop-button-left">
NEW FLAVOR:
SHOP
</div>
<div class = "shop-button-right">
<a href="#">
Test
</a>
</div>
</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-01-21 14:39:37
按照您设置的方式，您的.outer-bottomleft将始终与bottom分离。
临时解决方案是为.hide-button.btn-shop和.bottomleft提供一个position: absolute属性
.outer-bottomleft {
position: absolute;
bottom: 20%;
left: 2%;
display: flex;
color: black;
flex-direction: row;
}
.outer-bottomleft .bottomleft {
display: none;
}
.outer-bottomleft:hover .bottomleft {
display: flex;
}
.outer-bottomleft:hover .hide-button {
display: none;
}
.shop-button-left {
width: 50%;
}
.shop-button-right {
width: 50%;
}
.hide-button.btn-shop,
.bottomleft {
position: absolute;
}<div class="outer-bottomleft"> <span class="hide-button btn-shop">SHOP
</span>
<div class="bottomleft">
<div class="shop-button-left">
NEW FLAVOR: SHOP
</div>
<div class="shop-button-right">
<a href="#">
Test
</a>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65829524
复制
![[每日一题]山？水！](https://ask.qcloudimg.com/http-save/yehe-1659905/06ing8kd7q.jpeg)
腾讯云开发者
