隱藏/顯示在css淡入時懸停與褪色

Question

我有這個簡單的隱藏/顯示toggle它懸停時淡入/淡出文本。唯一的問題是，我不希望它是不可視的（因爲它佔用了不必要的空間）。但是當我添加顯示元素時，淡入淡出功能不再起作用。

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

與動畫漸變

，但只是被隱藏了：jsfiddle

WITHOUT的動畫漸變，但徘徊時，不佔用空間jsfiddle

出現是否有可能保持淡入淡出的動畫，而文字只是不可見？

Answer 1

您可以使用max-height刪除不需要的空間

見代碼片段波紋管：

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

如果你希望它始終拿不出空間，可以用絕對位置使文件流出

見代碼片段：

#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

我想包在另一個盒子你的div，然後進行絕對定位你的隱藏文本，以便它不佔用任何空間 - 評論中的代碼解釋發生了什麼

/* 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