過渡效果

我現在的情況：過渡效果

我目前存在的問題： 高度的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 =原創海報。 –

回答

相關問題