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

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()方法.在style()和backgroundPosition上查看W3Schools