Hover CSS styling that persists after mouse away

Question

I have a HTML ul banner that has two li sub-bars that are exposed on hover. However, if you mouse away from it or over another main entry, the hover is lost.

I was wondering if there was some way to easily maintain this hover after a mouse away. It's not something I can toss out so I'm very interested in extending it to support keeping it even after a mouse away for a few seconds, but being able to see new information if hovering over a different li element.

Here is my JSFiddle with an extremely simple demo with my HTML/CSS with the bare minimum to show off the feature: JSFiddle

<body>
<div class="nav-outer-repeat">
    <div class="nav">
        <div class="table">
            <ul class="select">
                <li style="color: white;"> <a><b>Hover Test</b></a>

                    <div class="select_sub">
                        <ul class="sub">
                            <li style="color: white;"><a href="">Test</a>
                            </li>
                            <li style="color: white;"><a href="">Test</a>
                            </li>
                            <li style="color: white;"><a href="">Test</a>
                            </li>
                        </ul>
                        <ul class="sub">
                            <li style="color: white;"><a href="">Test</a>
                            </li>
                            <li style="color: white;"><a href="">Test</a>
                            </li>
                            <li style="color: white;"><a href="">Test</a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="clear"></div>
    <div id="content-outer">
        <div id="content"></div>
    </div>

#content-outer  {
background: url(../../core/images/shared/content_repeat.jpg) repeat-x;
}
#content    {
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 18px;
    margin: 0 auto 0 auto;
    max-width: 100%;
    min-width: 780px;
    padding: 15px 0px 25px 0px;
}
.nav-outer-repeat   {
    background: url(../../core/images/shared/nav/repeat.jpg) repeat-x;
    height: 77px;
}
.nav    {
    float: left;
    font-family: Tahoma;
    font-size: 13px;
    height: 38px;
    position: relative;
    width: 1080px;
    min-width: 600px;
    z-index: 500;
}
.nav-divider    {
    background: url(../../core/images/shared/nav/divider.jpg) top no-repeat;
    float: left;
    height: 40px;
    width: 15px;
}
.nav .select,
.nav .current   {
    display: table-cell;
    float: left;
    list-style: none;
    margin: 0 0px 0 0;
    padding: 0;
    white-space: nowrap;
}
.nav li {
    float: left;
    height: auto;
    margin: 0;
    padding: 0;
}
.nav .select a  {
    color: #fff;
    display: block;
    float: left;
    height: 37px;
    line-height: 35px;
    padding: 0 0px 0 0px; 
    text-decoration: none;
    white-space: nowrap;
}
.nav .select_sub    {
    display: none;
    margin: 0 0 0 10px;
}
.nav .sub   {
    display: table;
    list-style: none;
    padding: 0;
}
.nav .select :hover .select_sub, 
.nav .current .show {
    background: url(../../core/images/shared/nav/back_0.gif);
    height: 75px;
    display: block;
    left: 0;
    padding: 0;
    position: absolute;
    text-align: left;
    top: 37px;
    width: 1200px;
    z-index: 100;
    transition:0s 50s;

}
.nav .select :hover .sub li a, 
.nav .current .show .sub li a   {
    background: transparent;
    border: 0;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    display: block;
    float: left;
    margin: 0;
    padding: 0 10px 0 10px;
    white-space: nowrap;
}
.clear  {
    clear: both;
    font-size: 0px;
    height: 0;
    line-height: 0px;
    margin: 0px;
    padding: 0px;
}

I think I'm most interested in some sort of time delay that it can stay on screen, but all my attempts have failed. I am hoping someone can give me some guidance on solving this with some CSS I may be missing, or perhaps some jQuery?

Seems like this has been answered before here: http://stackoverflow.com/questions/17100235/make-css-hover-state-remain-after-unhovering — su-ex, Nov 17 '15 at 00:12
I've just not been able to fully replicate that with transitions in my tests, there's only a few css lines, even placing transition:5s; after all of them I see no difference. — Greg Esposito, Nov 17 '15 at 00:36

score 1 · Accepted Answer · answered Nov 17 '15 at 01:53

You can add different transitions on hover and on normal. Make sure you hide your menu with an animatable property! Display won't work and also be careful trying to go from for example, height: 0px; to height: auto;.

Here is one way to do it.

I've forked your fiddle. First I've removed the :hover states and then I added:

.nav .select_sub{
  display: block;
}
.nav .select:hover .select_sub, 
.nav .select:hover .sub li a{
  margin-top: 0%;
  transition: all 0.2s;
}
.nav .select .select_sub, 
.nav .select .sub li a{
  margin-top: -100%;
  transition: all 2s 3s;
}

You can see I've hidden your menu with a large top margin. When you hover over .select the margin becomes zero in 0.2s, that should be fast enough for a good user experience.

When you stop hovering the submenu remains for three seconds and then goes back up ten times slower.

Wow, it makes a lot of sense to me how you did that, it also works really well with the multiple ul elements too with the full-blown site as well. I really appreciate your time, and I'll be tweaking the timers and see how it all works out! — Greg Esposito, Nov 17 '15 at 03:19

kaosmos · Answer 2 · 2015-11-17T18:54:26.807

0

In pure CSS3 you can use a transition delay: https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay animating the opacity of the dropdown. If you can't use CSS3 you have to go with JS (not necessarily jquery)

edited Nov 17 '15 at 18:54

answered Nov 17 '15 at 00:11

kaosmos

558
9
23

Uniforlyff · Answer 3 · 2015-11-17T02:43:15.577

Something like this.. but hey I tried.

HTML:

     <div class="menu">
        <p>Hover</p>
        <ul class="menu-content">
            <li>
                <ul>
                    <li>Menu 1</li>
                    <li>Menu 1</li>
                    <li>Menu 1</li>
                    <li>Menu 1</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>Menu 2</li>
                    <li>Menu 2</li>
                    <li>Menu 2</li>
                    <li>Menu 2</li>
                </ul>
            </li>   
        </ul>
    </div>

CSS:

.menu {
    width: 98%;
    text-align: center;
    padding: 20px 1%;
    background-color: #eee;
    overflow:  hidden;
}

.menu p {
    margin: 20px 0;
    color: #096847;
    font-size: 1.3em;
}

.menu:hover .menu-content {
    margin-top: 0;
}

.menu-content {
    margin-top: -100%;
    overflow: hidden;
    transition: all 1s ease-in;
}

.menu-content li {
    list-style-type: none;
}

.menu-content > li > ul > li {
    width: 25%;
    float: left;
    padding: 20px 0;
    background-color: #2aa87c;
    outline: 1px solid #ddd;
    cursor: pointer;
    color: #fff;
}

RESULT:

EXAMPLE

That looks pretty cool and I'll try to understand all that it does - thanks! — Greg Esposito, Nov 17 '15 at 03:17

Hover CSS styling that persists after mouse away

3 Answers3

Related