CSS Übergang muß nicht den Inhalt verstecken

Question

Ich habe ein div wo auf schweben, ich bin die Höhe des div Einstellung 0px. Ich habe einen Übergang zur height -Eigenschaft hinzugefügt, so dass die div aussieht, als wäre sie kollabiert. Der Inhalt der div wird jedoch weiterhin angezeigt.

Hinweis: Ich benutze auch Twitter Bootstrap. Wenn twitter-bootstrap bereits etwas mit Animationen anzeigen/verbergen kann, macht es mir nichts aus, es zu benutzen.

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

Hier ist meine JSFiddle

Answer 1

Sie wollen my-banneroverflow: hidden der Klasse hinzuzufügen. Dadurch wird verhindert, dass div Inhalte anzeigt, die außerhalb des Elementbereichs liegen. Selbst wenn seine Höhe 0 ist, ist das nicht dasselbe wie . Die Einstellung overflow wird das beheben.

Fiddle: 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

Das Problem ist, dass, wenn die .mybanner div in Höhe schrumpft, wird der Cursor nicht über es ist mehr an einem bestimmten Punkt (versuchen Sie es an der Spitze zu halten, ist es dann wird sich fast vollständig verstecken). Sie können nicht über etwas, das 0px hoch ist, schweben.

Als Alternative könnten Sie den Hover-Effekt auf das <text>-Tag in .mybanner setzen. Zumindest auf Firefox, das funktioniert (dh auf anderen Browsern versucht havent't.):

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

https://jsfiddle.net/fjhqerdt/