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

谢谢！

score 12 · Accepted Answer

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

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

希望能帮助到你：）

score 2 · Accepted Answer

2

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

于 2013-04-08T04:54:29.470 回答

score 2 · Accepted Answer

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

在你的CSS中添加 thi

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

在Jquery中使用它就像

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

score 0 · Accepted Answer

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

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

更多关于回调函数

4 回答 4