JQuery Div mousein/out/单击背景位置已断开

背景图像：

JSFiddle：

JQuery：

我正在寻找一种最简单的方法，当你把鼠标悬停在它上面的时候，它会显示背景位置：-14px，但是它会恢复到-0px，点击它会保持在-28px。当前在“我的本地版本”中，如果“超出/超入”有效，请单击“有效”，但如果在活动样式显示时将鼠标悬停在“超出”位置，则“单击事件”将再次恢复为活动样式

致以最良好的祝愿

---

Tim

您的JSFIDLE中没有包含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' });
    });
});

---

如果我理解正确：

---

如果您希望按钮的行为类似于复选框，我将如下实现：

---

您必须添加jQuery库才能使JSFIDLE正常工作。我可以建议使用addclass/removeclass函数吗？这样，您可以通过css将其样式设置得更清晰。你也可以用.css而不是javascript来完成整个过程。我修改了你的答案，因为它提供了我所需要的部分内容。这是您自己的更新版本。

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

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

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