0

当用户单击具有图像作为背景的链接时，我需要一个 onClick 事件来更改它的背景位置。这是链接：

<a href="#" id="favorite_1" class="favorite" onClick="favoriteBusiness(1);">Favorite</a>

它已经在 css 中设置，并且有两种状态，常规和悬停，悬停移动了 12px。

a.favorite {
    width: 15px;
    height: 12px;
    background: url(img/icon-fav.png) no-repeat;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    text-indent: -300px;
}

a.favorite:hover {
    background-position: 0 -12px
}

当我单击一次图像时，我需要将背景位置设置为与悬停状态相同。

我正在这样做，它有效：

document.getElementById("favorite_1").style.backgroundPosition = "0 -12px";

但是当再次点击链接时，我需要它切换回正常的背景位置，我无法让它工作。这是我正在尝试的功能，但它仅适用于将背景移动到“0 -12px”，而不是将其移回原来的位置。

function favoriteBusiness(id){

   if(document.getElementById("favorite_1").style.backgroundPosition == "0 -12px")
    document.getElementById("favorite_1").style.backgroundPosition = "";
   else
    document.getElementById("favorite_1").style.backgroundPosition = "0 -12px";

}

有人可以在这里指出我正确的方向吗？

4

1 回答 1

2

除非您进行计算，否则最好添加和删除包含新位置的类。这通常是用于操作 CSS sprites 的方法。

于 2012-04-17T17:21:29.290 回答