2

見つけられる限り多くのオンラインリソースとstackoverflowの質問を見て、すでに何時間も費やしましたが、何らかの理由でこれを理解することはできません.

CSS とイメージ スプライトを使用して、ホバーしたりクリックしたりすると変化するイメージとしてリンクを表示しようとしています。私は CSS をいじり、JavaScript をあまりにも長い間見てきたので、それを機能させる方法について何らかの方向性が必要です。

ホバーすると変更できましたが、実際に必要なのは、クリックすると画像が変更されることです。最初は再生ボタンが表示され、クリックすると一時停止ボタンが表示され、もう一度クリックすると再生ボタンなどが表示されます。

私が収集できるものから、JavaScript と onclick イベントを使用する必要があります。ただし、これがどのように機能するのか、または画像スプライトでどのように使用するのかはわかりません。

これまでの私のCSSは次のようになります

.testclass .stratus { background-position: -1px -1px; width: 21px; height: 21px;}.

.testclass .stratus:hover {background-position: -1px -29px; width: 21px; height: 21px;}.

ただし、これは再生ボタンとそれが上にあるときにのみ影響します。ここで、再生ボタンがクリックされたときに一時停止ボタンを表示する方法が必要です。

画像スプライトの URL。 http://www.danceyrselfclean.com/wp-content/uploads/2012/12/sprites.png

これを機能させようとしているページの URL。 http://www.priceofmilk.co.uk/uncategorized/ddd-2

これは CSS と HTML を使用して実現できますか、それとも JavaScript を使用する必要がありますか? どんな援助でも大歓迎です。

4

5 に答える 5

1

簡単な例を作りました。背景色とアンカーを使用していますが、状況に合わせて簡単に実装できます。

アップデート

画像を使用するようにコードを更新しました。

HTML

<a class="play_pause">PLAY</a>​

CSS

.play_pause {
    display: block;
    width: 24px;
    height: 23px;
    text-indent: -99999px;
    background: url(http://www.danceyrselfclean.com/wp-content/uploads/2012/12/sprites.png); 
    cursor: pointer;
}

.playing {
    background-position: -27px 0; 
}

.playing:hover {
    background-position: -27px -28px !important; 
}

.play_pause:hover {
    background-position: 0 -28px; 
}​

そしてJS：

$(document).ready(function() {
    $(".play_pause").click(function() {
        $(this).toggleClass('playing');
    });
});​​

</p>

JsFiddle の例

于 2012-12-21T12:20:44.667 に答える
0

最初のクリックのみを検出したい場合は、純粋な CSS でリンクに ID を指定し、:target 疑似クラス (例: a#theid:target {...}) を使用してこれを行うことができます。

ただし、2 回目のクリックを検出する必要があるため、JS を使用して CSS クラスを切り替える必要があります。基本的な方法は、イベント ハンドラーを使用することです。

document.getElementById('theid').onclick = function(){
this.className = this.className=='play' ? 'pause' : 'play';
};
于 2012-12-21T12:16:10.587 に答える
0

それは簡単です どこで読んだことがありますか？

jQuery('.testclass .stratus').click(function{
   jQuery(this).toggleClass('played');
})

CSS:

.played{
   background-position: -1px -29px;
}
于 2012-12-21T12:13:24.497 に答える
0

切り替えを実行するには JavaScript を使用する必要があります。純粋な CSS でそのようなロジックを実行する方法はありません。

最も簡単な方法は、 と の 2 つのクラスを用意することplayですpause。CSS を使用して、これらのクラスごとにスプライトのどの部分を表示するかを宣言します。次に、クリック イベント リスナーを JavaScript を使用して要素にアタッチし、クリック イベント コールバックplayで、要素からクラスを削除して代わりにクラスを適用しますpause。その逆も同様です。

MDN には、イベント リスナーを要素にアタッチする方法に関する優れた記事があります。そして、この SO の質問では、要素のクラスを追加/削除する方法について説明しています。

于 2012-12-21T12:14:05.410 に答える
0

現在のスプライトで とを使用.querySelectorAllした例。jQuery は使用されません。.addEventListener

var elm = document.querySelectorAll('.testclass .stratus'), i = elm.length, e;
while (e = elm[--i])
    e.addEventListener('click', function () { // this fn generates the listener
        var pause = false; // captured in scope, not global
        return function () { // this is the actual listener
            this.style.backgroundPositionX = (pause = !pause)?'-20px':'0px';
        }
    }(), false); // the () invokes the generator
于 2012-12-21T12:28:32.673 に答える