CSS精靈 - 如何讓懸停按鈕在按下狀態

標準
哈弗
按下（主動）

目前「標準「，」懸停「和」按下「的作品。問題是，「按下」只能在鼠標按下時保持按下狀態。我希望「按下」或「活動」狀態保持活動狀態，直到再次點擊。有任何想法嗎？ CSS解決方案？ JavaScript解決方案？

感謝您的幫助， d

下面的代碼：

<html> 

<style type="text/css"> 

    a.button { 
     background-image: url('BUTTON SPRITES IMAGE'); 
     width: 86px; 
     height: 130px; 
     display: block; 
     text-indent: -9999px; 

    } 

    a.micbutton:hover { 
     background-position: 0 -130px; 

    } 

    a.micbutton:active { 
     background-position: 0 -260px; 

    } 

</style> 

<a class="button" href="#" ></a> 

</html>

來源

2011-07-25 David J. Phillips

離開'：hover'或'：離開元素或者讓鼠標按鈕去後active'啓用是不可能單獨CSS。您必須添加一個JavaScript單擊事件來維護_active_樣式並處理_second_點擊以再次禁用它 – andyb

謝謝大家對你的幫助 - 極大真棒。它最終是一個新的CSS類和JavaScript的組合。這個新的代碼允許上述3種狀態（正常，懸停，按下）。當再次點擊「按下」狀態時，（精靈）按鈕恢復正常狀態。

下面是最終代碼：

<html> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 

<script type="text/javascript"> 

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

</script> 

<style type="text/css"> 

a.button { 
    background-image: url('BUTTON SPRITES IMAGE'); 
    width: 86px; 
    height: 130px; 
    display: block; 
    text-indent: -9999px; 

} 

a.button:hover { 
    background-position: 0 -130px; 

} 

a.button:active, a.active { 
    background-position: 0 -260px; 

} 

a.button1:active { 
background-position: 0 -260px; 

} 

</style> 

<a class="button" href="#" ></a> 

</html>

來源

2011-07-26 08:38:12

對我也有效:)謝謝 –

沒有問題Marci-man :) –

添加活動類：

a.button { 
    background-image: url('BUTTON SPRITES IMAGE'); 
    width: 86px; 
    height: 130px; 
    display: block; 
    text-indent: -9999px; 

} 

a.button:hover { 
    background-position: 0 -130px; 
} 

a.button:active, a.active { 
    background-position: 0 -260px; 
}

然後，當你的按鈕被激活只需添加類：

<a class="button active" href="#" ></a>

來源

2011-07-25 22:56:30 AlienWebguy

添加活動類是正確的。在click功能上使用toggleClass會添加活動類並在第二次點擊時刪除類。這是你相信之後的樣子。

Fiddle

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

來源

2011-07-25 23:09:54

對於正確的解決方案和我即將編寫的內容:-) – andyb

CSS精靈 - 如何讓懸停按鈕在按下狀態

回答

相關問題