我已经纠结了一段时间了,现在我觉得是时候问这个问题了。我正在尝试对 #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
并更改比赛按钮的背景。
最佳答案
您不能使用纯 css 处理父行为,是的,您需要一点 JQuery :)
看看这个简化的 Fiddle(我使用背景颜色而不是图像,但它是一样的):
这是您需要的 jquery:
$('#competitionsButton').hover(function(){
$('#navBar').animate({
height: '180px'
}, 500);
},
function(){
$('#navBar').animate({
height: '40px'
}, 500);
});
关于javascript - 使用 CSS3/Javascript 悬停时导航栏过渡高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19620378/