CSSのみ - マウスを離すまでボタンをスライドさせて位置を保持する方法？

Question

私はCSSだけを使い、マウスを動かすと右にスライドするようにします。私はまた、彼らが滑り出したボタンの上にマウスを置いたときに、彼らが「滑り出した」ままにしておきたい。私はいくつかの投稿を見て、同じことをしようとしたが、私の移行は本当にうまくいきません。また、ボタンの上にマウスを置くとボタンが消えます。ありがとう!!

私はjsfiddleを作成しましたので、私が何を意味するのかを確認できます。

https://jsfiddle.net/codingcodingcoding/58406ahk/

.div{ 
 
     -webkit-transition: width 5s; 
 
     transition: width 5s; 
 
    } 
 

 
    .hiddenButtons{ 
 
     display:none; 
 
    } 
 
    .div:hover + .hiddenButtons{ 
 
     display:inline-block; 
 
    } 
 
    .div:not(:hover) + .hiddenButtons{ 
 
     display:none; 
 
    }

<div class="div"> 
 
     SHOW 
 
    </div> 
 
    <div class="hiddenButtons"> 
 
     <div class="button1"> 
 
      <a>button1</a> 
 
     </div> 
 
     <div class="button2"> 
 
      <a>button2</a> 
 
     </div> 
 
    </div> 
 

 

 

Answer 1

隠しボタンがホバリング中に目に見える滞在するSHOWボタンの子要素でなければなりません。

.div{ 
 
     -webkit-transition: width 5s; 
 
     transition: width 5s; 
 
    } 
 

 
    .hiddenButtons{ 
 
     display:none; 
 
    } 
 
    .div:hover .hiddenButtons{ 
 
     display:inline-block; 
 
    }

<div class="div"> 
 
     SHOW 
 

 
    <div class="hiddenButtons"> 
 
     <div class="button1"> 
 
      <a>button1</a> 
 
     </div> 
 
     <div class="button2"> 
 
      <a>button2</a> 
 
     </div> 
 
    </div> 
 
    </div>