Question

我有一个div，在悬停时，我将div的高度设置为0px。我已经添加了一个到height属性的转换，所以div看起来像是在折叠。但是，div的内容仍会显示。

注意：我也在使用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

Answer 1

您想将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;
}

Answer 2

问题是，当.mybanner div在高度上缩小时，光标不再在某个点上方（尝试将其保持在顶部，然后它几乎完全隐藏）。你不能徘徊0px高的东西。

作为替代方案，您可以将悬停效果放在<text>内的.mybanner标记上。至少在Firefox上有效（即没有尝试过其他浏览器）：

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

https://jsfiddle.net/fjhqerdt/

CSS转换不会隐藏内容

2 个答案: