I need some help with a css issue. I'm actually trying to make an animated checked-button with a double animation effet. You can see what I'm aiming at here:

https://youtu.be/rMDGeAUQ0Wc

I'm working on the appearing of the button from the right side. I decided to use flexbox associated with a hover feature so I can make appear the button on hover, but it doesn't seem to work and I don't know why.

Here's the code:

HTML:

<div >

    <div >
      <p>text</p>
    </div>

    <div >
      <p>text</p>
    </div>

    <div >
      <p>text</p>
    </div>

  </div>

CSS:

.flexbox-container {
  display: flex;
  overflow: hidden;
  justify-content: space-between;
  }

.flexbox-3 {
  display: none;
}

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

Does anyone can help?

Cheers

CodePudding user response：

There are some errors in your CSS Try this

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

CodePudding user response：

try this

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

but I think that animation will not work due to display:none block. I would prefer you to write the code this way.

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

      .flexbox-container:hover > .flexbox-3 {
        right: 0;
      }

if you want to move .flexbox-2 try this CSS. I add 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);
      }