CSS過渡不隱藏內容

我有一個div在懸停，我設置div的高度爲0px。我已經向高度屬性添加了一個轉換，因此div看起來像是正在崩潰。但是，仍然顯示div的內容。CSS過渡不隱藏內容

注意：我也使用twitter bootstrap。如果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>

這裏是我的JSFiddle

來源

2017-02-13 LP13

您要添加overflow: hidden到類my-banner。這將阻止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; 
}

來源

2017-02-13 20:08:40 AtheistP3ace

的問題是，當.mybanner DIV的高度縮小，光標還沒有結束它了在某一點（儘量保持在最頂端，然後將它幾乎會完全隱藏）。你不能徘徊0px高的東西。

作爲一種替代方法，您可以在.mybanner內的<text>標記上設置懸停效果。至少在Firefox中，該作品（即havent't嘗試在其他瀏覽器。）：

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

https://jsfiddle.net/fjhqerdt/

來源

2017-02-13 20:15:29 Johannes

CSS過渡不隱藏內容

回答

相關問題