jquery - JQuery Div mousein/out/click 背景位置损坏

Question

背景图片： https ://tornhq.com/WorkingOn/Images/TextEditor/buttons.png

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

查询：

$(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' });
    });
});

我正在寻找最简单的方法来设置一个按钮，当你将鼠标悬停在它上面时会显示背景位置：-14px，但是它会恢复为 -0px，点击它会保持在 -28px。目前在我的本地版本上，如果您超出/进入它可以工作，单击可以工作，但是如果您在显示活动样式时将鼠标悬停（单击事件是活动样式），它将再次恢复。

最好的祝福，

蒂姆

Answer 1

您的 jsFiddle 中没有包含 jQuery

jsFiddle

工作正常：

$(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' });
    });
});

Answer 2

如果我理解正确： 演示

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

Answer 3

如果您希望按钮的行为类似于复选框 - 我将像这样实现它：

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;
    });
});