css - 如何使精灵图像在悬停不同的项目时发生变化？

Question

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

就是这样：

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

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

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

等等

Answer 1

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

/* child */
.submenu:hover (>) div{}
/*sibling*/
.submenu:hover ~|+ div{}

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

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

最常见的方法是更改​​背景位置，以便您的精灵的另一部分变得可见。但是如何准确地做到这一点，取决于你的标记。

Answer 2

我用背景位置解决了它。谢谢大家。

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