使用 CSS3/Javascript 悬停时导航栏过渡高度答案

【问题标题】：Navbar transition height on hover using CSS3/Javascript使用 CSS3/Javascript 悬停时导航栏过渡高度
【发布时间】：2013-11-06 08:58:56
【问题描述】：

我一直在拔头发，现在我觉得是时候问这个问题了。我正在尝试对#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 都可以大大减少我知道使用类等，但这只是一个小项目，我还没有整理它（另外，我还在学习！）。

所以基本上，我需要将鼠标悬停在比赛按钮上，这会将整个navBar 从40px 扩展到180px，并更改比赛按钮的背景。

【问题讨论】：

标签： javascript html css hover css-transitions

【解决方案1】：

你不能用纯 css 处理父行为，是的，你需要一点 JQuery :)

看看这个简化的 Fiddle（我使用背景颜色而不是图像，但它是一样的）：

http://jsfiddle.net/JB6Sf/

这是你需要的jquery：

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

【讨论】：