3

我正在使用 CSS 并尝试在不使用 js 触发翻转的情况下构建导航菜单。这个导航有点棘手，因为设计有箭头状的分隔线，分割成单独的链接背景会很痛苦......

出于某种原因，我现在无法弄清楚这一点，并认为我会把问题放在那里......是否可以使用伪类 :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 中工作）

我使用了绝对定位和一个新的精灵。

http://jsfiddle.net/kenaesthetic/rA59L/2/

最后一个链接不起作用......不知道为什么，因为它在这里可以正常工作。没有时间再纠结这个了。

谢谢您的帮助

4

3 回答 3

1

是的，这是可能的，使用大量的伪类并::after从最后li一项开始放置背景。

但更好的方法是将背景的一部分应用到每个列表项，这样你就可以打开它li:hover

好吧，我忍不住了，做了一个没有图像的，使用渐变和变换:)

于 2013-02-07T21:47:46.260 回答
0 
ul#nav li.home:hover{
    background-image:url('newBackgroundimage.png');
}

虽然你不需要那么具体：

li.home:hover{
     background-image:url('newBackgroundimage.png');
}
li.background:hover{
     background-image:url('newBackgroundimage.png');
}
li.process:hover{
     background-image:url('newBackgroundimage.png');
}

等等...

于 2013-02-07T21:48:25.293 回答
0

您可以这样做的一种方法是将背景图像切换到lis 而不是 ul，因为让悬停的子元素影响父元素可能很困难。

像这个例子这样的东西可能会起作用，尽管它只是构建得足够远以显示背景悬停在行动中。

http://jsfiddle.net/PzHT9/

于 2013-02-07T22:08:06.457 回答