Question

I am trying to do a custom bullet list. However, I want to use the same background-image, but changing the background-position (to give a cool effect)

The CSS I have is:

#sidebar ul{
    width:190px;
    list-style:none;
    margin:0;
    padding:0;
}

#sidebar li{
    border-top:1px dashed #ddd;
    background:#FAFAFA url('./images/bullet.png') no-repeat 15px 9px;
}

#sidebar li:hover{
    background-color:#fff;
    background-position:15px 0px;
}

#sidebar li a{
    display:block;
    padding:5px 20px 5px 26px; /*26 to give extra 6px for the bullet*/
}

The bullet changes correctly, and everything is ok. Except that both bullets are always visible 🙁

I want to know if there is a way to hide the other bullet.

An option could be to spread the images very far away (more than the height will ever be), but this is just a bad idea, and I don’t want to have a big image size.

I am open for other methods, if the way I am trying to do is just not good and you know a better way, please tell me.

Answer 1

I think it would be better to do something like this. Adjust values to your needs.

<li><span></span></li>

.

li { position: relative; }
li span { 
    position: absolute; 
    left: 0;
    width: 16px;
    height: 16px;
    margin-right: 16px;
    background: url('img.jpg') 0 0 no-repeat;
}
li:hover span { background-position: 0 -16px; }