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

Question

<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 的解决方案。

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

Answer 1

使用以下 CSS：

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

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

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

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

How to make CSS hover effect persist after clicking Bootstrap button

html

css

twitter-bootstrap

hover