transition:height 的动画效果移出问题

osc_05161248 发布于 04/08 20:30
阅读 18
收藏 0

设置的一个导航栏,并写了个下拉框,但是为什么,我transition:height 设置了过渡效果,只有弹出的时候有效果呢,鼠标移出的时候就没效果了呢,求大佬解惑~

HTML

 <!-- 导航信息外部容器 -->
 <div class="head-nave">
     <ul class="nav-list clearfix">
         <li class="all-goods"><a href="#">全部商品分类</a></li>
         <li class="show-goods"><a href="#">小米手机</a></li>
         <li class="show-goods"><a href="#">Redmi手机</a></li>
         <li class="show-goods"><a href="#">电视</a></li>
         <li class="show-goods"><a href="#">笔记本</a></li>
         <li class="show-goods"><a href="#">家电</a></li>
         <li class="show-goods"><a href="#">路由器</a></li>
         <li class="show-goods"><a href="#">智能硬件</a></li>
         <li class="common"><a href="#">服务</a></li>
         <li class="common"><a href="#">社区</a></li>
         <div class="nav-contant"></div>
     </ul>
     </div>
 </div>

CSS的样式

/* 调整导航的位置 */
.head-nave .nav-list {
    line-height: 100px;
    float: left;
    padding-left: 58px;
    margin-left: 7px;
    /* 设置与图标的间距 */
}

/* 设置li的样式 */
.head-nave li {
    float: left;
}

/* 设置超链接的样式 */
.head-nave .nav-list a {
    display: block;
    font-size: 16px;
    margin-right: 20px;
    
}

/* 隐藏第一个图标 */
.head-nave .nav-list li:first-child {
    visibility: hidden;
}

/* 设置超链接样式 */

.nav-list li:hover a {
    color: #ff6700;
}

/* 设置下拉框 */
.nav-contant {
    height:0;
    overflow: hidden;
    width: 100%;
    background-color: #fff;
    position: absolute;
    top: 100px;
    left: 0;
    transition:height 0.3s;
}

/* 设置鼠标移入的状态 */

.nav-list .show-goods:hover~.nav-contant,
.nav-contant:hover {
    
    height: 228px;
    border-top: 1px solid rgb(224, 224, 224);
    box-shadow: 0 5px 3px rgba(0, 0, 0, .2);
}

transition:height 0.3s; 这我也没写到hover里,是咋回事呢?

加载中
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部