过渡效果

我现在的情况：过渡效果

我目前存在的问题： 高度的div没有过渡效果和外部div的高度会增加悬停（我不想说！）

HTML

<div id="black_bar"></div> 
<div id="top_nav"> 
<a href="#"><div class="menu" id="home">HOME</div></a> 
<a href="#"><div class="menu">LIST OF CAR MANUFACTURERS</div></a> 
<a href="#"><div class="menu">WHY USE CARZPEDIA?</div></a> 
<a href="#"><div class="menu">ABOUT US</div></a> 
<a href="#"><div class="menu">CONTACT US</div></a> 
</div>

CSS

body{ 
    margin:0; 
} 
#top_nav{ 
    background-color:#000; 
    height:auto; 
} 
#top_nav a{ 
    text-decoration:none; 
    color:#FFF; 
    font-family:Arial, Helvetica, sans-serif; 
} 
.menu{ 
    display:inline-block; 
    padding:1em; 
    font-size:1em; 
} 
.menu:hover{ 
    background-color:#09F; 
    border-bottom-left-radius:2em; 
    border-bottom-right-radius:2em; 
    height:3em; 
    -webkit-transition:all 500ms ease; 
    -moz-transition:all 500ms ease; 
    -ms-transition:all 500ms ease; 
    -o-transition:all 500ms ease; 
    transition:all 500ms ease; 
} 
#home{ 
    color:#09F; 
} 
#home:hover{ 
    color:#FFF; 
}

来源

2014-07-24 VOXRAZR

只需设置一个固定高度的顶栏（这是你的CSS #top_nav），和（可选）在其上设置overflow:hidden;太（或内容会弹出当你悬停在它上面。不知道这是故意的）

看到这个fiddle与溢出隐藏

或者this one溢出可见

来源

2014-07-24 08:20:10

I * *觉得OP也想了'.menu'的div从当前高度动画到他们扩大的高度。要做到这一点，你需要给他们一个固定的高度，因为你不能过渡到/从'height：auto'。 [你的小提琴的叉子]（http://jsfiddle.net/posgarou/vwV7L/）。 –

嘿，看起来很整齐。 +1。我很难搞清楚OP的含义。 –

对不起，这是一个reddit术语，我没在想。 OP =原创海报。 –

回答

相关问题