Question

我有10个链接。我正在为单个链接使用单独的精灵表，其中包含活动，悬停和非活动链接图像。我想知道如何从javascript更改背景位置。我知道如何在CSS中做到这一点，但对于10个不同的链接我认为javascript将是一个更好的选择，因为我可以为每个链接使用相同的代码。等待你的建议。

Answer 1

你错了：这应该在CSS中完成，它是最快的渲染，即使它需要更多的初始声明。只需确保您的CSS已优化。

.links{
background:transparent url(sprite.png) 0 0;
}

#link1{
background-position: 0 0;
}
#link1:hover{
background-position: 0 -50px;
}

#link2{
background-position: 100px 0;
}
#link2:hover{
background-position: 100px -50px;
}

HTML：

<a class="links" id="link1" href="#">link 1</a>
<a class="links" id="link2" href="#">link 2</a>

如果你真的，真的想在javascript中做，你正在寻找style（）方法。 See W3Schools on style() and backgroundPosition

Answer 2

最好是使用css，即使是多个图像。

如果10个链接的精灵的大小调整相同，您可以制定一个与图像无关的规则，只重新定位背景图像

a.someclass:hover{
  background-position:Xpx Ypx;
}

并将someclass（或其他任何名称）应用于您的所有链接......

使用javascript在悬停时更改背景图像位置

2 个答案: