Twitter的引導按鍵保留懸停點擊

Question

後狀態我不能讓他們已經被點擊後，我的按鈕恢復到初始狀態。

我想要的按鈕，按鈕上的文字改變顏色，當我翻身，然後回去就立刻把它我點擊後的方式。

這裏的按鈕的HTML：

<a href="#portfolio" class="btn btn-primary btn-xl page-scroll">Portfolio</a> 

和CSS：

section.bg-image .btn-primary { 
    border: 2px solid #fff; 
    background-color: rgba(0, 0, 0, 0.0); 
    -webkit-transition: all .35s; 
    -moz-transition: all .35s; 
    transition: all .35s; 
} 

section.bg-image .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary { 
    color: #6699cc; 
    background-color: #fff; 
    border: 2px solid #fff; 
} 

Answer 1

點擊後，您的按鈕沒有恢復回來，因爲你有相同的樣式:focus爲您:hover做和:active。當選擇元件:focus被施加（例如點擊在，專注，通過鍵盤等選項卡式成）和直到選擇另一元件保持在適當位置。

另外：你描述明確是不太可能的CSS的行爲;你不能在:hover上發生任何事情，然後點擊結束。 :hover樣式將始終適用，直到您不再懸停在元素上。所以如果你想要樣式只能應用到mouseUp事件之前，你需要把這些樣式放在:active僞類中。

.btn-primary { 
 
    border: 2px solid #fff; 
 
    background-color: rgba(0, 0, 0, 0.0); 
 
    -webkit-transition: all .35s; 
 
    -moz-transition: all .35s; 
 
    transition: all .35s; 
 
} 
 

 
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary { 
 
    color: #6699cc; 
 
    background-color: #fff; 
 
    border: 2px solid #fff; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<a href="#portfolio" class="btn btn-primary btn-xl page-scroll">Portfolio</a>