Make CSS Hover state remain after “unhovering”

Question

I'm facing a small issue that I've never really had to deal with before. I'm a beginner web designer, and I recently used the CSS hover feature on a div on my webpage. Another image is revealed when one hovers over this div; however, the new image disappears when you "unhover", and I would like it to stay visible.

Here is an example of the code that I am using:

#about {
height: 25px;
width: 84px;
background-image: url('about.png');
position: absolute;
top: 200px;
left: 0px;
}

#onabout {
height: 200px;
width: 940px;
position: absolute;
top: 60px;
left: 0px;
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 15px;
font-weight: 300;
display: none;
}

#about:hover #onabout {
display: block;
}

Is there any way to solve this using just CSS? I haven't used any javascript thus far and I'm not very comfortable with it.

Either way, any solutions will be gladly accepted! Thanks so much.

Answer 1

Some Pure CSS Ideas

I'm not quite sure what you intend by "stay visible." Here are some differing thoughts based off your possible purposes, but each has possible side effects not intended. The only purely permanent solution is going to be through javascript (as others have noted).

Longer 'Stay' But Still Not Permanent

If you mean stay visible as long as one might also be hovering over the revealed image itself, then a simple change in your code will work:

#about:hover #onabout,
#onabout:hover {
   display: block;
}

Permanent 'Stay'

If you wrap your #onabout in a position: fixed wrapper that is also revealed on hover, and set that wrapper to fix to the top, right, bottom, and left of the screen, then use that wrapper's :hover to keep the #onabout it will stay permanently. But it is also going to be in a fixed position relation, and other hover events or clicks may be prevented. That is likely not desirable, but again, I don't know your specific application, so it is possible that the idea would work for you. You would actually set the display: block as default on the #onabout and hide it through the wrapper. Code for the wrapper and the hover would be something like:

#permaHoverWrap {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   display: none;
}

#about:hover #permaHoverWrap,
#permaHoverWrap:hover {
   display: block;
}

Since the #onabout is in the #permaHoverWrap in this solution, it becomes visible through the display of the fixed wrapper, and then stays that way through the guaranteed hover of that wrapper. Again, the side effects of this solution could be too severe except under the right circumstances. However, as a proof of concept, it can be done purely through CSS.

Answer 2

It will have to be done with JavaScript, using jquery you can permanently add the style like this:

$(#onabout).onmouseover().css("display","block");

Answer 3

One can apparently use CSS animation, with an infinite delay to handle this. See an article here... http://joelb.me/blog/2012/maintaining-css-style-states-using-infinite-transition-delays/

Answer 4

As @Leo Pflug indicates, you can do this with some confidence in CSS and HTML on and after click by using the techniques detailed here http://cssconf.com/talk-seddon.html.

With a dash of JavaScript, it's possible and simple and reliable, as shown by @Wind Shear.

Pure CSS on and after hover, however, is a lot more difficult and, depending on what browsers you need to support, not possible in a currently production-viable way. The problem is that anything you change with the :hover pseudo-class selector will not (and/or should not) match elements over which you are no longer hovering.

The only way you are likely to be able to do this with pure CSS is with CSS3 Animations. To that end, I have created a demo http://cdpn.io/GLjpK (v2 w/FF & IE) that uses CSS animations to swap to a hover state on hover and then persist that state until the page is reloaded.

@keyframes hover {
  0% {
    // normal styles
  }
  100% {
    // hover styles
  }
}

.class {
  animation-name: hover;
  animation-duration: 1ms;
  animation-fill-mode: backwards;
  animation-play-state: paused;      
}

.class:active,
.class:focus,
.class:hover {
  animation-fill-mode: forwards;
  animation-play-state: running;
}

I tested in it Chrome latest, Firefox latest, and IE 10. Worked in all three.

Note I had some trouble with codepen not displaying the latest saved code, so I created a fresh one here http://cdpn.io/GLjpK.

See Stop a CSS3 Animation at the last frame of the iteration-count and Stopping a CSS3 Animation on last frame for what/why/how.

UPDATE: Lea Verou has now also demonstrated this technique in her post Smooth state animations with animation-play-state

Answer 5

the best solution is adding or removing classes to an element like this(done with JQUERY)

#about {
height: 25px;
width: 84px;
background-image: url('about.png');
position: absolute;
top: 200px;
left: 0px;
}

#onabout {
height: 200px;
width: 940px;
position: absolute;
top: 60px;
left: 0px;
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 15px;
font-weight: 300;
display: none;
}

#about.hover #onabout {
display: block;
}

notice that I chang :hover to .hover(Class Name)

$("#about").hover(function(){
   $(this).addClass("hover");
});

Answer 6

Just happened to come across the answer to your question. See example css below:

.Top_body_middle_headings_subtitle {
margin-top: 35px;
margin-left: 25px;
font-family: 'Roboto-Light';
font-size: 12pt;
color: #C77F0D;
transition: 600ms 3s;
}

or

.Top_body_middle_headings_par {
margin-top: 4px;
width: 180px;
margin-left: 25px;
font-family: 'Roboto-Light';
font-size: 9pt;
color: #745D26;
position: relative;
top: -30px;
left: -205px;
opacity: 0;
transition: opacity 2.5s 3s, left 600ms 3s, top 1.5s 3s;
}

the second number/entry on the transition feature acts as a release function. In effect, your hover transition(s) will take place and not revert back to normal until after the period of time quoted in the second entry (transition: 600ms 3s; - This example would represent your mouse virtually not hovering off the element for 3s).

Hope this helps.

K.P.U