CSSの遷移がコンテンツを非表示にしない

Question

私はdivを持っています。ホバリングでは、divの高さを0pxに設定しています。私は高さのプロパティへのトランジションを追加したので、divが崩壊しているように見えます。ただし、divの内容は引き続き表示されます。

注：私は、Twitterのブートストラップも使用しています。 twitter-bootstrapに既にアニメーションを表示/非表示にするものがある場合は、使用しても構いません。

.my-banner { 
 
    position: fixed; 
 
    margin-top: 50px; 
 
    height:20px; 
 
    background-color: rgba(104, 179, 212, 0.8); 
 
    width: 100%; 
 
    text-align: center;  
 
    -webkit-transition: height 1s; 
 
    transition: height 1s; 
 
} 
 

 
.my-banner:hover { 
 
    height: 0px; 
 
}

<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script> 
 
<div class="navbar navbar-inverse navbar-fixed-top tpt-navbar"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse"> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button>    
 
     </div> 
 
     <div class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav tpt-navbar-links"> 
 
       <li> 
 
        <a href="#">Home</a>      
 
       </li> 
 
       <li> 
 
        <a href="#">Services</a>      
 
       </li> 
 
       <li class="dropdown"> 
 
        <a href="#">About</a> 
 
        <ul class="dropdown-menu tpt-navbar-links"> 
 
         <li><a href="/#/Contact">Contact</a></li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="my-banner"> 
 
    <text>NOTICE: This is my banner.</text> 
 
</div>

は、ここでは、クラス my-bannerに overflow: hiddenを追加したい私の JSFiddle

Answer 1

です。これにより、divの要素領域外のコンテンツの表示が停止されます。高さが0であっても、それはdisplay: noneと同じではありません。 overflowを設定するとそれが修正されます。

フィドル：https://jsfiddle.net/8zoy4cuv/3/

.my-banner { 
    position: fixed; 
    margin-top: 50px; 
    height:20px; 
    background-color: rgba(104, 179, 212, 0.8); 
    width: 100%; 
    text-align: center;  
    -webkit-transition: height 1s; 
    transition: height 1s; 
    overflow: hidden; 
} 

Answer 2

問題は（それ、一番上にそれを維持しようと.mybannerのdivの高さが縮むとき、カーソルがある時点でもうそれを超えていないということですほとんど完全に非表示になります）。あなたは0px高い何かを動かすことはできません。

<text>タグのホバー効果を.mybannerに入れることもできます。少なくとも作品のFirefox、上（すなわちhavent'tは、他のブラウザで試してみました）：

.my-banner text:hover { 
    height: 0px; 
} 

https://jsfiddle.net/fjhqerdt/