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>