使用CSS3/Javascript懸停的導航欄過渡高度

Question

我一直在拉我的頭髮一段時間，現在我覺得是時候提問了。我試圖對#navBar（家長）產生影響，但只有當#competitionsButton（孩子）被徘徊時。

navBar包含所有的按鈕，目前只有整個navBar徘徊時，轉換纔有效。

是否有使用的Javascript的方式，可以解決這問題。

HTML：

<div id="navBar"> 

    <div class="spacer"></div> 

    <a href="index.html"><div id="homeButton"></div></a> 

    <a href="index.html"><div id="howItWorksButton"></div></a> 

    <a href="index.html"><div id="aboutButton"></div></a> 

    <a href="index.html"><div id="competitionsButton"></div></a> 

    <a href="index.html"><div id="contactUsButton"></div></a> 

    <a href="index.html"><div id="postCompButton"></div></a> 

    <div id="spacer"></div> 

</div> 

CSS：

#navBar { 
    margin: 0 auto; 
    width: 800px; 
    height: 40px; 
    background: url(../images/navBarTransitionBG.png) repeat; 
    transition: height 0.5s; 
} 

#navBar:hover { 
    background: url(../images/navBarTransitionBG.png) repeat; 
    height: 180px; 
} 

.spacer { 
    width: 100px; 
    height: 40px; 
    float: left; 
} 

#homeButton { 
    width: 100px; 
    height: 40px; 
    float: left; 
    background: url(../images/navButtons/home.png); 
} 

#homeButton:hover { 
    background: url(../images/navButtons/homeUL.png); 
} 

#howItWorksButton { 
    width: 100px; 
    height: 40px; 
    float: left; 
    background: url(../images/navButtons/howitworks.png); 
} 

#howItWorksButton:hover { 
    background: url(../images/navButtons/howitworksUL.png); 
} 

#aboutButton { 
    width: 100px; 
    height: 40px; 
    float: left; 
    background: url(../images/navButtons/about.png); 
} 

#aboutButton:hover { 
    background: url(../images/navButtons/aboutUL.png); 
} 

#competitionsButton { 
    min-width: 100px; 
    min-height: 40px; 
    float: left; 
    background: url(../images/navButtons/competitions.png); 
} 

#competitionsButton:hover { 
    background: url(../images/navButtons/competitionsUL.png); 
} 

#contactUsButton { 
    width: 100px; 
    height: 40px; 
    float: left; 
    background: url(../images/navButtons/contactus.png); 
} 

#contactUsButton:hover { 
    background: url(../images/navButtons/contactusUL.png); 
} 

#postCompButton { 
    width: 100px; 
    height: 40px; 
    float: left; 
    background: url(../images/navButtons/postcomp.png); 
} 

#postCompButton:hover { 
    background: url(../images/navButtons/postcompUL.png); 
} 

大多數CSS起來有沒有需要一個解決方案，但它應該給你的結構的想法。無論是HTML和CSS可以大量減少我知道使用類等，但一直只是一個小項目，我還沒有收拾起來（另外，我還在學習！）。

所以基本上，我需要將鼠標懸停在比賽按鈕，將從40px延長整個navBar到180px，改變它的比賽按鈕的背景。

Answer 1

不能與純CSS父行爲的工作，是的，你需要一點點的jQuery :)

看一看這個簡化的小提琴（我曾與背景顏色，而不是圖像，但它是相同的）：

http://jsfiddle.net/JB6Sf/

這是你需要jQuery的：

$('#competitionsButton').hover(function(){ 
    $('#navBar').animate({ 
     height: '180px' 
    }, 500); 
}, 
    function(){ 
    $('#navBar').animate({ 
     height: '40px' 
    }, 500); 
});