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

如何限制我的自定义项目符号列表背景的背景图像宽度/高度？

1 个答案: