悬停时使用 CSS3/Javascript 的导航栏过渡高度
Navbar transition height on hover using CSS3/Javascript
我已经拔头发一段时间了,现在我觉得是时候问这个问题了。 我试图对#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 :)
看看这个简化的小提琴(我使用背景颜色而不是图像,但它是一样的):
http://jsfiddle.net/JB6Sf/
这是你需要的jquery:
$('#competitionsButton').hover(function(){
$('#navBar').animate({
height: '180px'
}, 500);
},
function(){
$('#navBar').animate({
height: '40px'
}, 500);
});
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- Bootstrap更改移动设备的导航栏高度
- 使用Bootstrap3更改Scroll Jquery上导航栏的高度
- 固定标签导航小部件的高度
- 具有 100% 窗口高度的移动导航栏,无论内容如何
- 当 html 高度为 100% 时,粘性导航中断
- 导航菜单以不同的高度向下滚动
- 悬停时使用 CSS3/Javascript 的导航栏过渡高度
- 如何防止滚动时此导航栏的高度增加
- 引导导航标头高度
- 移动可查看区域的高度(地址栏和导航栏之间)
- 增加特定导航栏的高度
- 如何使用jquery或javascript计算浏览器菜单栏,工具栏,导航栏,书签的高度
- 移动引导导航条测量等于它的高度
- 导航栏上的链接有100%的高度作为标志
- 获取标题的高度,并在滚动到标题之外时显示顶部导航
- 如何使用“;滚动到“;以考虑不同媒体查询时的固定导航高度
- Javascript固定位置导航间歇性地工作,具体取决于窗口高度/滚动量
- 如果高度大于/w引导折叠导航
- 一个网站的画廊软件,将根据高度调整大小,点击图像导航