html - 无序列表项的背景图像交换鼠标悬停

Question

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

Answer 1

你可以这样做我的小提琴

解释：

在这里，您为每个元素提供一个背景图像，然后为这些<li>元素提供一点填充<li>......现在使用:hover您将这些替换为另一个图像:)

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

​</p>