Question

我有sprite 8张图片。我想要做的是：如果有人将鼠标悬停在子菜单列表上（比如第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;}

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

2 个答案: