Verbergen/Zeigen toggle bei Hover mit Fade in css

Question

Ich habe diese einfache verstecken/zeigen toggle die ein-/ausblendet Text beim Schweben. Das einzige Problem ist, ich möchte nicht, dass es unsichtbar ist (weil es unnötigen Platz einnimmt). Aber wenn ich Anzeigeelement hinzufüge, funktioniert die Fade-Funktion nicht mehr.

#stuff { 
 
    opacity: 0.0; 
 
    -webkit-transition: all 400ms ease-in-out; 
 
    -moz-transition: all 400ms ease-in-out; 
 
    -ms-transition: all 400ms ease-in-out; 
 
    -o-transition: all 400ms ease-in-out; 
 
    transition: all 400ms ease-in-out; 
 
    color: black; 
 
    text-align: center; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: #e0e0e0; 
 
    border-radius: 25px; 
 
    width: 200px; 
 
} 
 

 
#hover { 
 
    width: 150px; 
 
    height: 10px; 
 
    margin-bottom: 15px; 
 
    cursor: pointer; 
 
    float: center; 
 
    font-family: 'Open Sans', FontAwesome; 
 
    font-weight: 600; 
 
} 
 

 
#hover:hover+#stuff { 
 
    opacity: 1.0; 
 
    display: inline-block; 
 
} 
 

 
`

<div id="hover">HOVER HERE</div> 
 
<div id="stuff">Revealed text</div>

MIT FADE ANIMATION, aber nur versteckt: jsfiddle

OHNE FADE ANIMATION, aber erscheint, wenn schwebt und nimmt nicht Speicherplatz jsfiddle

Ist es möglich, die Fade-Animation beibehalten, ohne dass der Text nur unsichtbar ist?

Answer 1

Sie können max-height verwenden, um den unerwünschten Raum zu entfernen

Siehe Codeausschnitt unten:

#stuff { 
 
    opacity: 0.0; 
 
    -webkit-transition: all 400ms ease-in-out; 
 
    -moz-transition: all 400ms ease-in-out; 
 
    -ms-transition: all 400ms ease-in-out; 
 
    -o-transition: all 400ms ease-in-out; 
 
    transition: all 400ms ease-in-out; 
 
    color: black; 
 
    text-align: center; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: #e0e0e0; 
 
    border-radius: 25px; 
 
    width: 200px; 
 
    max-height:0; 
 
} 
 

 
#hover { 
 
    width: 150px; 
 
    height: 10px; 
 
    margin-bottom: 15px; 
 
    cursor: pointer; 
 
    float: center; 
 
    font-family: 'Open Sans', FontAwesome; 
 
    font-weight: 600; 
 
} 
 

 
#hover:hover+#stuff { 
 
    opacity: 1.0; 
 
    max-height:100%; 
 
    
 
}

<div id="hover">HOVER HERE</div> 
 
<div id="stuff">Revealed text</div>

Und wenn Sie es wollen keinen Raum immer nehmen, können Sie Verwenden Sie die absolute Position, um den Fluss des Dokuments zu verlassen

Siehe Code-Schnipsel:

#stuff { 
 
    opacity: 0.0; 
 
    -webkit-transition: all 400ms ease-in-out; 
 
    -moz-transition: all 400ms ease-in-out; 
 
    -ms-transition: all 400ms ease-in-out; 
 
    -o-transition: all 400ms ease-in-out; 
 
    transition: all 400ms ease-in-out; 
 
    color: black; 
 
    text-align: center; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: #e0e0e0; 
 
    border-radius: 25px; 
 
    width: 200px; 
 
    position:absolute; 
 
} 
 

 
#hover { 
 
    width: 150px; 
 
    height: 10px; 
 
    margin-bottom: 15px; 
 
    cursor: pointer; 
 
    float: center; 
 
    font-family: 'Open Sans', FontAwesome; 
 
    font-weight: 600; 
 
    
 
} 
 
.wrapper{ 
 
    position:relative; 
 
} 
 
#hover:hover + #stuff { 
 
    opacity: 1.0; 
 
}

<div class="wrapper"> 
 
<div id="hover">HOVER HERE</div> 
 
<div id="stuff">Revealed text</div> 
 
<div>

Answer 2

ich Ihre divs in einem anderen Feld wickeln würde und dann absolut Ihren verborgenen Text positionieren, so dass es keinen Platz nicht einnehmen - Kommentare im Code erklären, was

/* add a container */ 
 
.container { 
 
    position: relative; 
 
} 
 

 
#stuff { 
 
    opacity: 0; 
 
    -webkit-transition: all 400ms ease-in-out; 
 
    -moz-transition: all 400ms ease-in-out; 
 
    -ms-transition: all 400ms ease-in-out; 
 
    -o-transition: all 400ms ease-in-out; 
 
    transition: all 400ms ease-in-out; 
 
    color: black; 
 
    text-align: center; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: #e0e0e0; 
 
    border-radius: 25px; 
 
    width: 200px; 
 
    display: inline-block; 
 

 
    /* position stuff underneath the container */ 
 
    position: absolute; 
 
    top: 100%; 
 

 
    /* give the background a colour so you can't see anything below */ 
 
    background: #ffffff; 
 
} 
 

 
#hover { 
 
    width: 150px; 
 
    cursor: pointer; 
 
    float: center; 
 
    font-family: 'Open Sans', FontAwesome; 
 
    font-weight: 600; 
 
} 
 

 
/* show stuff on hover of the container - so you can hover the stuff without it dissappearing */ 
 
.container:hover #stuff { 
 
    opacity: 1; 
 
} 
 

 
`

<div class="container"> 
 
    <div id="hover">HOVER HERE</div> 
 
    <div id="stuff">Revealed text</div> 
 
</div> 
 
Some content below

geschieht