0

ユーザーが背景として画像を持つリンクをクリックすると、背景の位置を変更する onClick イベントが必要です。これはリンクです：

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

すでに css で設定されており、通常とホバーの 2 つの状態があり、ホバーは 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
}

画像を 1 回クリックすると、ホバー状態と同じように背景位置を設定する必要があります。

私はこのようにやっていますが、うまくいきます：

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 スプライトを操作するために行われることです。

于 2012-04-17T17:21:29.290 に答える