I am currently experimenting with customizing a bullet list. My goal is to apply the same background image, while changing the background position to create a unique effect.
Here is my CSS code:
#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 bullets are changing correctly, and everything looks good. However, I am facing an issue where both bullets are always visible.
I am seeking suggestions on how to hide the other bullet. One idea could be to move the images far beyond the visible area (more than the height will ever be), but I consider this approach impractical as it would increase the image size significantly.
If you have any alternative methods or better ways to achieve the desired effect, please share your insights with me. I am open to exploring different approaches.