3按鈕狀態 - 正常，翻轉（懸停），激活（點擊）與jQuery的？

我使用下面的代碼來讓我的按鈕在盤旋時更改爲其翻轉狀態。3按鈕狀態 - 正常，翻轉（懸停），激活（點擊）與jQuery的？

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

與施加到所有的按鈕的div，使用其中所有的背景圖像具有所有三種狀態相同的圖像中的背景位功能的.button類 - 在0 0像素'示出的正常狀態下，在'0 -23px'顯示翻轉狀態，'0 -46px'顯示激活狀態。

我想弄清楚如何讓我的按鈕顯示它們的活動狀態，當他們被點擊，同時讓所有其他按鈕回到其正常狀態。我嘗試了下面的代碼，將按鈕更改爲它們的活動狀態，但是當鼠標移出按鈕時，它們會回到正常狀態。

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

謝謝！

來源

2013-04-08 DillonB

你可以做一個小提琴？ – SachinGutte 2013-04-08 04:49:28

所以當你點擊它時，你想保持「活動」狀態？ – 2013-04-08 04:51:47

爲什麼你不在css（.hover，.rollover，.active）中創建3個類，只是在jquery中更改類..使用.live ..如果你告訴你如何實現這些按鈕，我可以告訴你代碼... – Dinesh 2013-04-08 04:54:20

您可以添加類此，如：

添加THI在CSS

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

而且在jQuery的使用它像

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

閱讀文檔http://api.jquery.com/toggleClass/

來源

2013-04-08 04:59:56

輝煌！非常感謝！解決了我的問題，這真的很有幫助。喜歡這個網站。 – DillonB 2013-04-08 20:40:53

我做了一個小提琴，以防萬一任何人有類似的問題，並希望看到我如何實現這些解決方案讓我的按鈕工作，因爲我想 - > http://jsfiddle.net/PPbFJ/11/ – DillonB 2013-04-08 21:02:13

現在，如果你使用的回調比用於該甲jQuery函數..

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

更多Call Back Function

來源

2013-04-08 04:53:10

您可以使用僞類：活躍{背景IMG： - ;背景位置：0 -46px;}

來源

2013-04-08 04:54:29 web2008

的最好的事情是簡單的CSS實現。

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

希望它能幫助:)

來源

2013-04-08 05:11:55 Avishek

三個按鈕我用Rohan Kumar的答案實施的課程，效果很好。 – DillonB 2013-04-08 20:45:05

嘿，..這是工作！ :) – Ansyori 2013-09-25 03:09:09

我以這種方式設置按鈕，但遇到了在Safari中添加點擊事件的障礙：https：//stackoverflow.com/questions/48106286/safari-click-event-and-active-state-cannot-coexist – 2018-01-05 02:11:49

3按鈕狀態 - 正常，翻轉（懸停），激活（點擊）與jQuery的？

回答

相關問題