Twitter Bootstrap Question posted in

CSS transition doesnt hide the content – Twitter bootstrap

I have a div where, on hover, I’m setting the height of the div to 0px. I have added a transition to the height property so the div looks like it is collapsing. However, the content of the div still displays.

Note: I am using twitter bootstrap as well. If twitter-bootstrap already has something to show/hide with animation I don’t mind using it.

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

Here is my JSFiddle

Tags:

2

Answers


  1. 0

    You want to add overflow: hidden to the class my-banner. This will stop the div from showing content that falls outside of the elements area. Even when its height is 0, that is not the same as display: none. Setting the overflow will fix that.

    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;
}
    Login or Signup to reply.
  2. 0

    The problem is that when the .mybanner div shrinks in height, the cursor isn’t over it anymore at a certain point (try to keep it up at the top, then it will hide almost completely). You can’t hover something that is 0px high.

    As an alternative, you could put the hover effect on the <text> tag inside .mybanner. At least on Firefox, that works (ie. havent’t tried on other browsers):

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

    https://jsfiddle.net/fjhqerdt/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search