3 按钮状态 - 使用 jquery 正常、滚动（悬停时）、活动（单击时）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15871469/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
3 button state - normal, rollover (on hover), active (on click) with jquery?
提问by DillonB
I'm using the following code to get my buttons to change to their rollover state when hovered over.
我正在使用以下代码让我的按钮在悬停时更改为它们的翻转状态。
$('.button').hover(function(){
$(this).css('background-position', '0 -23px');
}, function(){
$(this).css('background-position', '0 0px');
});
with the .button class applied to all the button divs, using the background-position function where all the background images have all three states in the same image - at '0 0px' show the normal state, at '0 -23px' shows the rollover state, and at '0 -46px' shows the active state.
将 .button 类应用于所有按钮 div，使用 background-position 函数，其中所有背景图像在同一图像中具有所有三种状态 - 在 '0 0px' 显示正常状态，在 '0 -23px' 显示翻转状态，在 '0 -46px' 显示活动状态。
I'm trying to figure out how to get my buttons to show their active states when they are clicked, while having all other .button buttons go back to their normal states. I've tried the following code which changes the buttons to their active states, but when the mouse is moved off the buttons they go back to their normal states.
我试图弄清楚如何让我的按钮在被点击时显示它们的活动状态，同时让所有其他 .button 按钮恢复到它们的正常状态。我尝试了以下代码，这些代码将按钮更改为活动状态，但是当鼠标从按钮上移开时，它们会返回到正常状态。
$('.button').click(function(){
$(this).css('background-position', '0 -46px');
});
Thanks!
谢谢！
回答by Avishek
The best thing to do would be simple css implementation.
最好的办法是简单的 css 实现。
.button
{
//your css
}
.button:active
{
//your css
}
.button:hover
{
//your css
}
Hope it helps :)
希望能帮助到你 ：）
回答by web2008
You can use the pseudo class a:active {background-img: - ;background-position: 0 -46px;}
您可以使用伪类 a:active {background-img: - ;background-position: 0 -46px;}
回答by Rohan Kumar
You can add Class for this, like:
您可以为此添加类，例如：
Add thi in your CSS
在你的CSS 中添加这个
.active{background-position:0 -46px !important;}
And in Jqueryuse it like
在Jquery 中使用它就像
$(document).ready(function(){
$('.button').click(function(){
$(this).toggleClass('active');
});
});
Read Docs http://api.jquery.com/toggleClass/
回答by Rohit Azad
Now if you used to callback function in jquery than used to this formate ..
现在，如果你习惯于在 jquery 中回调函数而不是习惯这个格式..
$('.button').hover(function(){
$(this).css('background-position', '0 -23px', function(){
$(this).css('background-position', '0 0');
});
});
More about Call Back Function
更多关于回调函数
