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

Question

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

截屏

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

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

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

试试这个

Answer 2

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

在 a:hover 上更改 li 的背景图像

希望它有所帮助。

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