CSS nur - wie man Tasten herausrutschen und Position halten, bis Maus verlässt?

Question

Ich möchte nur CSS verwenden und Schaltflächen mit Mauszeiger nach rechts schieben. Ich möchte auch, dass sie "herausgeschoben" bleiben, wenn ich über die herausgeschobenen Knöpfe schwebe. Ich habe mir einige Beiträge angeschaut und versucht, das Gleiche zu tun, aber mein Übergang funktioniert nicht wirklich. Wenn ich den Mauszeiger über die Schaltflächen halte, verschwinden die Schaltflächen. Vielen Dank!!

Ich habe eine jsfiddle erstellt, damit Sie sehen können, was ich meine.

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

die versteckten Tasten müssen untergeordnete Elemente der SHOW Taste sichtbar während des Schwebens zu bleiben.

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