CSS3/Javascript를 사용하여 마우스를 놓을 때 Navbar 천이 높이

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 :이 솔루션을 필요하지 않습니다하지만 당신에게 구조의 아이디어를 제공한다 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); 
} 

. HTML과 CSS CSS를 많이 사용하면 수업을 줄일 수 있지만 그저 작은 프로젝트 일 뿐이며 정돈하지 못했습니다. (여전히 배우고 있습니다!).

기본적으로 경기 버튼 위로 마우스를 가져 가면 navBar을 40px에서 180px으로 확장하고 경기 버튼의 배경을 변경합니다.

는

Answer 1

당신은 순수 CSS로 부모의 행동에 작동하지 않을 수

는, 그래 당신은 JQuery와 약간의 :

이 (내가 대신 이미지의 배경 색상으로 일하지만 동일합니다)이 단순화 바이올린에서보세요이 필요 :

http://jsfiddle.net/JB6Sf/이 당신이 필요로하는 JQuery와는 다음과 같습니다

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