3按钮状态-正常，翻转(悬停)，活动(点击)与jquery

Question

我使用下面的代码让我的按钮在鼠标悬停时变为翻转状态。

$('.button').hover(function(){
$(this).css('background-position', '0 -23px');
}, function(){
$(this).css('background-position', '0 0px');
});

将。button类应用于所有按钮div，使用background-position函数，其中所有背景图像在同一图像中具有所有三种状态-在'0 0px'显示正常状态，在'0 -23px'显示翻转状态，在'0 -46px'显示活动状态。

我想弄清楚如何让我的按钮显示他们的活动状态时，他们被点击，而有所有其他。按钮按钮回到他们的正常状态。我已经尝试了下面的代码，改变按钮的活动状态，但当鼠标离开按钮，他们回到他们的正常状态。

$('.button').click(function(){
$(this).css('background-position', '0 -46px');
});

谢谢!

Answer 1

最好的办法就是简单的css实现。

.button
{
    //your css
}
.button:active
{
    //your css
}
.button:hover
{
    //your css
}

希望有帮助

Answer 2

您可以为此添加class，如:

添加到你的CSS

.active{background-position:0 -46px !important;}

在Jquery中使用

$(document).ready(function(){
    $('.button').click(function(){
        $(this).toggleClass('active');
    });
});

阅读文档http://api.jquery.com/toggleClass/

Answer 3

你可以使用伪类a:active {background-img: -;background-position: 0 -46px;}

Answer 4

现在如果你习惯了jquery中的回调函数而不是习惯了这种格式..

$('.button').hover(function(){
  $(this).css('background-position', '0 -23px', function(){
    $(this).css('background-position', '0 0');
  });
});

关于回调函数的更多信息