使悬停时显示为flexbox

Question

我需要一些帮助与css的问题。我实际上是在尝试制作一个带有双重动画效果的动画选中按钮。你可以在这里看到我的目标:

https://youtu.be/rMDGeAUQ0Wc

我正在努力从右侧按钮的出现。我决定使用flexbox与悬停功能相关联，这样我就可以在悬停时出现按钮，但它似乎不起作用，我不知道为什么。

代码如下:

.flexbox-container {
display: flex;
overflow: hidden;
justify-content: space-between;
}
.flexbox-3 {
display: none;
}
.flexbox-container: hover+flexbox-3 {
display: block;
}

<div class="flexbox-container">
<div class="flexbox-1">
<p>text</p>
</div>
<div class="flexbox-2">
<p>text</p>
</div>
<div class="flexbox-3">
<p>text</p>
</div>
</div>

有人能帮忙吗?

欢呼

Answer 1

try this

.flexbox-container:hover > .flexbox-3 {
display: block;
}

，但我认为动画将不工作，由于display:none block。我更喜欢你这样写代码。

.flexbox-3 {
position: relative;
right: -30%;
transition: 0.5s;
}
.flexbox-container:hover > .flexbox-3 {
right: 0;
}

如果你想移动.flexbox-2试试这个CSS。我添加tranform: translate

.flexbox-container {
display: flex;
overflow: hidden;
justify-content: space-between;
width: 300px;
border: 1px solid black;
}
.flexbox-3 {
position: relative;
opacity: 0;
right: -30%;
transition: 0.5s;
visibility: hidden;
}
.flexbox-2 {
transform: translateX(0);
transition: 0.5s;
}
.flexbox-container:hover .flexbox-3 {
right: 0;
opacity: 1;
visibility: visible;
}
.flexbox-container:hover .flexbox-2 {
transform: translateX(-30px);
}

Answer 2

你的CSS有一些错误试试这个

.flexbox-container:hover .flexbox-3 {
display: block
}

但是动画在这里不起作用因为animate不能与display属性

一起使用