JQuery Div鼠标/输出/点击后台位置坏了

Question

背景图片 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' });
    });
});

我正在寻找一个最简单的方法来设置一个按钮，当你将鼠标悬停在它上面时会显示背景位置：-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

如果我理解正确的话： demo

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