Question

当用户点击将图像作为背景的链接时，我需要一个更改其背景位置的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";

}

有人能指出我在正确的方向吗？

Answer 1

除非您进行计算，否则最好添加和删除包含新位置的类。这通常是为了操纵CSS精灵所做的。

用Javascript设置图像的背景位置

1 个答案: