使悬停时出现挠曲箱
使悬停时出现挠曲箱
提问于 2022-06-15 11:33:56
我需要一些帮助的css问题。我实际上是在做一个带有双动画效果的动画勾选按钮。你可以看到我的目标是什么：
我正在努力从右边看按钮的外观。我决定使用与悬停特性相关联的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>
有人能帮忙吗？
干杯
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-06-15 11:39:32
尝尝这个
.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);
}Stack Overflow用户
发布于 2022-06-15 11:45:29
您的CSS中有一些错误请试一试
.flexbox-container:hover .flexbox-3 {
display: block
}但是，动画在这里不能工作，因为动画不适用于display属性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72630600
复制相关文章
相似问题
腾讯云开发者
