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按钮恢复到正常状态。我尝试了下面的代码，将按钮更改为活动状态，但当鼠标从按钮上移开时，它们会恢复到正常状态。

$('.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

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

Answer 3

您可以为此添加Class，例如：

在 CSS

中添加thi

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

在 Jquery 中使用它

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

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

Answer 4

现在，如果您曾经在jquery中使用回调函数而不是使用此格式..

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

有关 Call Back Function

的更多信息