MouseOver的背景图像交换无序列表项

Question

我有一个列表项，我希望在项目上有图像而不是文本.... 最好的方法是什么？什么杀了我试图用onmouseover事件交换图像... 任何帮助将不胜感激....

Answer 1

你可以这样做My Fiddle

说明：

在这里，您为每个<li>元素提供背景图片，而不是为这些<li>提供一些填充...现在使用:hover将这些替换为另一个图像：）< / p>

HTML

<ul>
   <li>Hello</li>
   <li>World</li>
</ul>​

CSS

ul li {
    background-image: url('http://www.bseindia.com/include/images/nav_bullet.png');
    background-repeat: no-repeat;
    background-position: 2px 4px;
    padding-left: 10px;
}

li:hover {
    background-image: url('http://www.rbs.in/India/_image/bullet-blue.gif');
    background-repeat: no-repeat;
    background-position: 2px 4px;
    padding-left: 10px;
}