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

【问题标题】：How to make CSS hover effect persist after clicking Bootstrap button单击 Bootstrap 按钮后如何使 CSS 悬停效果持续存在
【发布时间】：2015-04-13 05:33:48
【问题描述】：

<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/

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

另外，有没有办法让下拉菜单相对于上面的大按钮居中？

【问题讨论】：

我已经检查了几个主题，虽然有些提供了有用的提示，但我无法按照我在图片上显示的方式实现它。有些是：stackoverflow.com/questions/12923435/… 或 stackoverflow.com/questions/19777166/… 它们更像是下拉列表，但我正在处理它们，感谢您的耐心，如果您觉得您正在为我做这项工作，请随时忽略它。谢谢。
这将帮助您了解 SO 的工作原理：stackoverflow.com/help/how-to-ask
非常感谢您的链接，我已经编辑了帖子，希望它看起来更具体和简化

标签： html css twitter-bootstrap hover

【解决方案1】：

可以使用以下 CSS：

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

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

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

【讨论】：