Question

我正在使用CSS并尝试构建导航菜单而不使用js来触发翻转。这个导航有点棘手，因为设计中有像分隔线一样的箭头会分裂成单独的链接背景......

出于某种原因，我现在无法解决这个问题，并认为我会把问题放在那里......是否可以使用伪类：悬停以换掉每个链接的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。

有人想破解它吗？可以这样做吗？我的头痛了：）

谢谢大家。

更新

Ok guys / gals这是我的解决方案（注意：必须在IE8中工作）

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

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

最后一个链接不起作用...不确定为什么它在本地工作正常。没时间弄乱这个了。

感谢您的帮助

Answer 1

Yeah it's possible，使用大量伪类并将背景放在最后一个::after项目的li上。

但更好的方法是将背景的一部分应用于每个列表项，这样您就可以将其切换到li:hover

好吧，我无法帮助它，made one without images，使用渐变和变换：）

Answer 2

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');
}

等等......

Answer 3

你可以做的一种方法是将背景图像切换到li而不是ul，因为有一个影响父母的悬停子元素可能很困难。

此示例之类的内容可能会有效，但它的构建范围足以显示背景悬停在行动中。

http://jsfiddle.net/PzHT9/

高级CSS翻转 - 父容器图像交换

3 个答案: