Question

我遇到了一个关于img src的一个非常有趣的问题，它改变了：hover。

如你所见，在<a>扇区上空盘旋，你无法从逻辑上看到白色的img。所以我在黑白上有相同的图标，我想要在#menu的扇区上移动，img src将img链接更改为黑色图标，而不是白色，这些仅用于非悬停的扇区。

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

请参阅以下示例。它显示了如何在mouseover事件中更改li的背景图像。

change background image of li on an a:hover

希望有所帮助。

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

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

3 个答案: