Make CSS hover state remain after unhovering

Question

How can I make the hover state remain for at least 1 second? Currently it is difficult to select the sub menu items as the hover state disappears too soon.

Here is the jsFiddle.

My HTML:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div>
                <span>Logo+Text</span>
            </div>
            <div class="btn-group has_dropdown" style="margin-left: 200px">
                <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Lists</a>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="#">Sub List 1</a>
                    </li>
                    <li>
                        <a href="#">Sub List 2</a>
                    </li>
                    <li>
                        <a href="#">Sub List 3</a>
                    </li>
                    <li>
                        <a href="#">Sub List 4</a>
                    </li>
                    <li>
                        <a href="#">Sub List 5</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

And CSS:

#headerDropdown .dropdown:hover .dropdown-menu,
.btn-group:hover .dropdown-menu {
    display: inline-flex !important;
}

http://stackoverflow.com/a/14513707/3536236 this Answer may help you. Using CSS Transition Delays — Martin, Jan 30 '16 at 22:55
if you add ", .dropdown-menu:hover" to your selectors you will probably avoid your issue. — miguel-svq, Jan 31 '16 at 10:56

score 8 · Accepted Answer · answered Jan 31 '16 at 00:02

You can use CSS transition with delay. But you can't use it with display property, So do it with visibility instead.

.btn-group .dropdown-menu {
  display: inline-flex;
  transition: all 0s ease 1s; /*delay 1s*/
  visibility: hidden;
}
.btn-group:hover .dropdown-menu {
  transition-delay: 0s;
  visibility: visible;
}

Updated jsFiddle

score 0 · Answer 2 · answered Jan 31 '16 at 00:16

Transition delay is a good option if you have css3 support. Otherwise a simple jquery solution would suffice.

$(".dropdown-toggle").hover(function() {
    $(this).addClass("active");
}, 
function() {
    var dropdown = $(this);
    window.setTimeout(function(){
        $(dropdown).removeClass("active");
    }, 1000);
});

Make CSS hover state remain after unhovering

2 Answers2