Как ограничить ширину / высоту фонового изображения моего собственного списка списка маркеров?

Question

Я пытаюсь создать собственный список.Тем не менее, я хочу использовать тот же background-image, но меняя background-position (чтобы дать крутой эффект)

У меня есть CSS:

#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*/
}

Пуля меняется правильнои все ок.За исключением того, что обе пули всегда видны: (

Я хочу знать, есть ли способ скрыть другую пулю.

Можно было бы распространить изображения очень далеко (больше, чемвысота когда-нибудь будет), но это просто плохая идея, и я не хочу иметь большой размер изображения.

Я открыт для других методов, если способ, которым я пытаюсь сделать, этопросто не хорошо, и вы знаете лучший способ, пожалуйста, скажите мне.

Answer 1

Я думаю, что было бы лучше сделать что-то подобное.Настройте значения в соответствии с вашими потребностями.

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