1

背景画像: https://tornhq.com/WorkingOn/Images/TextEditor/buttons.png

JSFiddle: http://jsfiddle.net/3RVCy/2/

JQuery:

$(document).ready(function () {
    $('#FontSize').mouseover(function () {
        $(this).css({ "background-position": '-14px 0px' });
    });
    $('#FontSize').mouseout(function () {
        $(this).css({ "background-position": '0px 0px' });
    });
    $('#FontSize').click(function () {
        $(this).css({ "background-position": '-28px 0px' });
    });
});

カーソルを合わせると background-position: -14px が表示されるボタンを作成する最も簡単な方法を探していますが、-0px に戻り、クリックすると -28px のままになります。現在、私のローカルバージョンでは、オーバーアウト/インが機能する場合、クリックは機能しますが、アクティブなスタイルが表示されているときにホバーアウトすると (クリックイベントはアクティブなスタイルです)、再び元に戻ります。

よろしくお願いします、

ティム

4

3 に答える 3

0

jsFiddle に jQuery が含まれていませんでした

jsフィドル

ここに画像の説明を入力

正常に動作します：

$(document).ready(function () {
    $('#FontSize').mouseover(function () {
        $(this).css({ "background-position": '-14px 0px' });
    });
    $('#FontSize').mouseout(function () {
        $(this).css({ "background-position": '0px 0px' });
    });
    $('#FontSize').click(function () {
        $(this).css({ "background-position": '-28px 0px' });
    });
});
于 2013-04-06T10:03:12.433 に答える
0

ボタンをチェックボックスのように動作させたい場合は、次のように実装します。

http://jsfiddle.net/3RVCy/7/

$(document).ready(function () {
    var state = false; // pressed
    $('#FontSize').mouseover(function () {
        if(!state) {
            $(this).css({ "background-position": '-14px 0px' });
        }
    });
    $('#FontSize').mouseout(function () {
        if(!state) {
            $(this).css({ "background-position": '0px 0px' });
        }
    });
    $('#FontSize').click(function () {
        if(!state) {
            $(this).css({ "background-position": '-28px 0px' });
        }
        else {
            $(this).css({ "background-position": '-14px 0px' });
        }
        state = !state;
    });
});
于 2013-04-06T10:17:27.473 に答える
0

私があなたを正しく理解している場合: デモ

$('#FontSize').click(function () {
        $('#FontSize').unbind('mouseover');
        $('#FontSize').unbind('mouseout');
        $(this).css({ "background-position": '-28px 0px' });
});
于 2013-04-06T10:07:10.310 に答える