：活動和：懸停都在同一時間活動，填充堆棧

Question

我現在有一個我的設計問題，我創建一個懸停按鈕使用：懸停CSS元素，然後確保它使用：active元素保持不變。

但是，hover和active兩者都在其各自的CSS規則中指定了填充，當您單擊按鈕時仍然懸停在它上面時會產生問題 - 填充堆棧和按鈕完全錯位。

我該怎麼做才能避免這種情況？

Answer 1

這是你的意思（點擊div來查看懸停/活動）。

HTML：

<div class="a">Some content</div> 

CSS：

.a{ 
    display:block; 
    padding:5px; 
} 
.a:hover{ 
    padding:5px; 
    background:red; 
} 
.a:active{ 
    padding:5px; 
    background:blue; 
} 

實施例：http://jsfiddle.net/justincook/JsWCF/