Q:

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/
I'd like the blue hover on the big button to remain when clicked/active, tried :active, :focus via CSS and some jQuery workarounds but nothing works. I'd prefer a solution via CSS if possible.
Also, is there any way to center the dropdown menu in relation to the big button above?

A:

Got it working with the following CSS: 
.btn-group.open .btn.dropdown-toggle {
/*hover effect*/ }

Check it applied here: http://jsfiddle.net/rainerpl/ZuMv5/5/
Hope it helps others, thanks everyone.

