单击 Bootstrap 按钮后如何使 CSS 悬停效果持续存在

How to make CSS hover effect persist after clicking Bootstrap button

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="stayBlue">
        <img src="#"/>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#"><img src="#" height="32px" width="32px"/>Dropdown link</a></li>
      <li><a href="#"><img src="#" height="32px" width="32px"/>Dropdown link2</a></li>
      <li><a href="#"><img src="#" height="32px" width="32px"/>Dropdown link3</a></li>
      <li><a href="#"><img src="#" height="32px" width="32px"/>Dropdown link4</a></li>
    </ul>
</div>

http://jsfiddle.net/rainerpl/ZuMv5/5/

我希望在 clicked/active 时大按钮上的蓝色悬停保持不变,尝试通过 CSS :active、:focus 和一些 jQuery 解决方法,但没有任何效果。如果可能的话,我更喜欢通过 CSS 的解决方案。

另外,有什么方法可以使下拉菜单相对于上面的大按钮居中吗?

使用以下 CSS:

.btn-group.open .btn.dropdown-toggle {
/*hover effect*/ }

在此处检查应用:http://jsfiddle.net/rainerpl/ZuMv5/5/

希望对大家有所帮助,谢谢大家