我正在使用CSS尝试构建导航菜单,而不使用js触发鼠标悬停事件。这个导航菜单有点棘手,因为设计中有箭头状的分隔符,将其拆分成单独的链接背景会很麻烦...
目前我无法解决这个问题,想请教一下...是否可以使用伪类:hover来交换UL的背景与每个链接的背景。
我已经创建了一个示例http://jsfiddle.net/kenaesthetic/dkEAr/。
目前我无法解决这个问题,想请教一下...是否可以使用伪类:hover来交换UL的背景与每个链接的背景。
我已经创建了一个示例http://jsfiddle.net/kenaesthetic/dkEAr/。
body{
background-color:#efefef;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
#content{
background-color:white;
margin: 28px auto;
padding:33px;
width:894px;
border-radius:8px;
box-shadow:1px 1px 5px #ddd;
height:600px;
}
ul#nav{
width:100%;
height:48px;
background-image:url(http://www.mniac.com/mniac-assets/images/nav-sprite.png);
}
ul#nav li{
float:left;
}
ul#nav li a{
display:block;
color:#6f6f70;
text-transform:uppercase;
text-decoration:none;
padding:17px 0 16px 0;
text-align:center;
font-size:15px;
}
ul#nav li a:hover{
color:#fff;
}
ul#nav li a.home{
width:56px;
text-indent:-9999px;
}
ul#nav li a.home:hover{
}
ul#nav li a.background{
width:210px;
}
ul#nav li a.process{
width:214px;
}
ul#nav li a.impliment{
width:214px;
}
ul#nav li a.reference{
width:200px;
}
这是CSS。
有人试试吗?这可行吗?我的头疼死了 :)
谢谢大家。
更新:
好的,各位,这是我的解决方案(注意:必须在IE8中工作)
我使用了绝对定位和一个新的Sprite。
http://jsfiddle.net/kenaesthetic/rA59L/2/
最后一个链接没用……不知道为什么,因为它在本地运行良好。没有时间再折腾了。
感谢您的帮助。