使悬停时出现挠曲箱

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

尝尝这个

    .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
}

但是，动画在这里不能工作，因为动画不适用于display属性。