0

我有一个带有图像分隔符的导航栏，当您滚动时，链接会改变颜色。我希望翻转颜色覆盖分隔线，但它会停在它们前面，看起来很奇怪。示例：http ://stsh.me/2PD

如您所见，分隔线图像仍显示在右侧。如何在 css 中覆盖它们？我需要js吗？我有的：

.navigation ul{
     width: 600px;
     float: right;
     margin: 0px;
     border-left: solid 25px #a34699;
     background-color: #c3bf36;
     padding: 0;
}
.nav li{
     float: left;
     background: url(../images/nav_divider.png) center left no-repeat;
     text-align: center;
     position: relative;
}
.nav a{
    color: #fff;
    text-decoration: none;
    display: block;
    font-size: 13pt;
    padding: 4px 23px 4px;    
}
.nav a:hover{
    color: #636466;
}
.nav li:hover{
    background: #4dd1e5;
    list-style-image: none;
    list-style-type: none;
    position: relative;
    z-index: 999;
}

谢谢！

4

2 回答 2

0

尝试这个：

.nav li{
    float: left;
    background-color:transparent;
    background-image: url(../images/nav_divider.png);
    background-position:center left;
    background=-repeat:no-repeat;
    text-align: center;
    position: relative;
}

.nav li:hover{
    background-color: #4dd1e5;
    background-image: none;
    list-style-image: none;
    list-style-type: none;
    position: relative;
    z-index: 999;
}
于 2012-07-06T14:56:21.330 回答
0

尝试添加背景图像：无；到 .nav li:hover。

于 2012-07-06T14:30:08.077 回答