Rollover a divider image in css?

Question

I have a navigation bar that has image dividers, and when you rollover the links change color. I would like the rollover color to cover the dividers, but it stops before them and looks weird. Example: http://stsh.me/2PD

As you can see, the divider image is still showing up on the right side. How do I cover them in css? Do I need js? What I have:

.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;
}

Thank you!

Cant you write a psudo class to hide the divider on Hover ? – Shiv Kumar Ganesh Jul 06 '12 at 14:19 — Shiv Kumar Ganesh, Jul 06 '12 at 14:19

score 0 · Answer 1 · answered Jul 06 '12 at 14:30

0

Try adding background-image: none; to the .nav li:hover.

answered Jul 06 '12 at 14:30

zen

1,115
3
28
54

score 0 · Answer 2 · answered Jul 06 '12 at 14:56

0

Try this:

.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;
}

answered Jul 06 '12 at 14:56

Billy Moat

20,792
7
45
37

Nope, it's doing the same thing. :/ – Rachel Jul 06 '12 at 15:51

Rollover a divider image in css?

2 Answers2