Css 如何在悬停不同项目时更改精灵图像？

我有一个

sprite

共8张图像。我想做的是：如果有人将鼠标悬停在子菜单列表上（比如第1项），那么显示在不同div上的sprite图像必须更改。因此子菜单项和这个带有精灵的div通过css相互关联。问题是：如何为8张图像执行此操作

就是这样：

悬停项目1=显示精灵图像1

悬停项目2=显示精灵图像2

悬停项目3=显示精灵图像3

---

等等。

当div是子菜单的子菜单或DOM中的同级菜单时，您只能使用纯css执行此操作。如果没有，则必须使用javascript：

/*子对象*/
.子菜单：悬停（>）div{}
/*兄弟姐妹*/
.子菜单：悬停~|+div{}

使用javascript，您需要在子菜单中注册鼠标悬停事件，并在处理函数中更改图像

document.queryselector(".submenu").addEventListener("mouseover",function(){/*stuff here*/});

---

最常见的方法是更改背景位置，使精灵的另一部分可见。但具体如何做，取决于您的标记。

我用背景位置解决了这个问题。谢谢大家

.page-id-1 {background: url(images/image.png) top left no-repeat; background-position: -502px 0;}
.page-id-2 {background: url(images/image.png) top left no-repeat; background-position: -904px 0;}
 .page-id-3 {background: url(images/image.png) top left no-repeat; background-position: -1306px 0;}
.page-id-4 {background: url(images/image.png) top left no-repeat; background-position: -1708px 0;}
.page-id-5 {background: url(images/image.png) top left no-repeat; background-position: 0 -71px;}
.page-id-6 {background: url(images/image.png) top left no-repeat; background-position: -402px -71px;}
.page-id-7 {background: url(images/image.png) top left no-repeat; background-position: -804px -71px;}
.page-id-8 {background: url(images/image.png) top left no-repeat; background-position: -1206px -71px;}

---

更改悬停时的背景位置？背景位置将不可能，因为他正在使用8个不同的images@Vivek龙：一个和另一个有什么关系。当然，可以在悬停项目时修改背景位置以显示精灵的另一部分。事实上，这是成千上万个网站上最常用的方法…@feela除了这个还有其他可能吗？你能给出一些链接或JSFIDLE的例子吗？你看过我的小提琴了吗？有什么不对劲吗？顺便说一句，你的声明中有很多多余的css。。。您可以省略背景声明，只需将其放入一个泛型块中即可。我会的。谢谢你，克里斯托夫。