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

Question

我正在使用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中工作）

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

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

最后一个链接没用……不知道为什么，因为它在本地运行良好。没有时间再折腾了。

感谢您的帮助。

- EZDC

---

你想在用户鼠标悬停时将li元素的背景更改为另一个吗？ - Ramin Omrani

不要改变ul的背景。 - EZDC

Answer 1

是的，这是可能的，使用大量伪类并将背景放在最后一个li项目的::after上。

但更好的方法是将背景的一部分应用于每个列表项，这样您只需在li:hover上切换它即可。

---

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

- nice ass

---

不错啊！这就是正解。我得更仔细地看一下这个。 - EZDC

但是处理箭头不会很麻烦吗？我猜想要使用透明的 PNG 图片和绝对定位…？ - EZDC

不，只需要一个带有角落图形和1像素宽度线条的图像，用作列表项的重复背景（角落应用于“::before”）。你可能需要使用一些边距。如果你决定分享你的导航栏，我可能会尝试这种方法 :) （顺便说一句，忘记了最后一个li图像-http://jsfiddle.net/sghyK-并且你可以删除!important） - nice ass

这太棒了。我现在几乎脑死了。稍后我会深入研究的。谢谢。 - EZDC

刚意识到我需要在ie8中使其工作，所以不能使用css3伪类（对吧？）。我应该采用绝对定位和透明png的方法吗？ - EZDC

不错的人，非常令人印象深刻。我被困在为恐龙客户工作的过去中... 我很快就会发布我的解决方案。 - EZDC

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

等等...

- tahdhaze09

Answer 3

你可以通过将背景图像切换到 li 而不是 ul 来实现，因为让悬停的子元素影响父元素可能会很困难。

类似这个示例的东西可能有效，尽管它只构建到足以展示背景悬停的效果。

http://jsfiddle.net/PzHT9/

- gotohales