html - 在 li / 悬停时更改图像答案

【问题标题】：html - image changing on li / a hoverhtml - 在 li / 悬停时更改图像
【发布时间】：2013-08-20 10:00:55
【问题描述】：

我遇到了一个非常有趣的关于 img src 的问题，它在 a:hover 上发生了变化。

SCREENSHOT

如您所见，悬停在<a> 扇区时，您在逻辑上看不到白色的img。所以我在黑白上有相同的图标，我想悬停#menu的扇区，img src将img链接更改为黑色图标，而不是白色，仅适用于非悬停扇区。

CSS+HTML：http://paste.laravel.com/KJ1

【问题讨论】：

你不能用 css 交换 img src，你必须使用 javascript，或者将图像作为 css 背景图像（最好的解决方案 imo）
建议改用 CSS 精灵：css-tricks.com/css-sprites

标签： html css tags

【解决方案1】：

ul li a{
 background:#000000 url(/path/to/white/icon) left no-repeat;
 background-color:black;
}
ul li a:hover{
 background:#FFFFFF url(/path/to/black/icon) left no-repeat;
}

试试这个

【讨论】：

使用了你的方法，它改变了图标，但是白色的 bg 不起作用，悬停在扇区:((
有效！谢谢，但是，如何控制图标位置？我的意思是左/右像素。
当有超过 1 个位置参数时它会消失，但适用于 1

【解决方案2】：

请看下面的例子。它展示了如何在鼠标悬停事件中更改 li 的背景图像。

change background image of li on an a:hover

希望对您有所帮助。

【讨论】：

嗯，它只改变扇区 bg，而不是图标？
您可以在图标标签或图标容器中使用相同的方法。

【解决方案3】：

您可以为此使用背景图像精灵，这里有一篇关于精灵的文章：http://css-tricks.com/css-sprites/ 这也将减少服务器调用以获取图像，因为所有图像都可以在一个文件中。

CSS 示例：

ul li a{
   background: #000000 url('sprite.png') no-repeat;
}
ul li a:hover{
   background-color: #FFFFFF;
}

//then classes for each different link

ul li a.home {
   //white icon
   background-position: 0 0; 
}
ul li a.home:hover {
   //black icon
   background-position: 0 -20px;
}

【讨论】：