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

Here i go with my CSS idea.

You may use transition-delay; http://jsfiddle.net/nAg7W/

div img {
    position:absolute;
    opacity:0;
    transition:0s 180s;
}
div:hover img {
    opacity:1;
    transition:0s;
}
div {
    line-height:1.2em;
    font-size:1em;
    color:black;
    transition:0s 180s;
}
div:hover {
    line-height:0;
    font-size:0;
    color:transparent;
    transition:0;
}

markup:

<div>some text to hover to see an image wich is hidden as you read this
<img src="http://placehold.it/200x200&text=zi image" />

it could be possible as well, to click, so it fades away. http://jsfiddle.net/nAg7W/1/

div:hover img:focus {/* includes tabindex in html tag for img */
   opacity:0;
   transition:3s;
   -webkit-transform:rotate(-360deg) scale(0.23);
   -webkit-transform:rotate(-360deg) scale(0.23);
   -moz-transform:rotate(-360deg) scale(0.23);
   -o-transform:rotate(-360deg) scale(0.23);
   -ms-transform:rotate(-360deg) scale(0.23);
   transform:rotate(-360deg) scale(0.23);
}

Answer 2

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 3

You can't permanently stay as hover state using CSS as it merely defines the rules on styling the tags, classes, IDs, pseudo-classes, and states. So unfortunately, you need Javascript to solve the problem.

Being a fan of jQuery library (hehehe), here is my solution.

CSS

ul li ul {
    display: none;
}
ul li.permahover ul {
    display: block;
}

Javascript using jQuery

$("#onabout").one("mouseover", function() {
  $("#onabout").addClass('permahover');
});

The one event attaches a handler to an event for the elements. The handler is executed at most once per element.

Demo

http://jsfiddle.net/jlratwil/w83BW/

Answer 4

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

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

Answer 5

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 6

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 7

I don't think that there is any possibility to do this with :hover, when relying on pure css. If you insist on using css, you might change it to clicking. So that when the user clicks on the div, the other one gets shown permanently. Like this:

<style>
.onabout
{
    display: none;
}

input#activate
{
    display: none;
}

input#activate:checked + .onabout
{
    display: block;
}
</style>

<label for="activate">
    <div class="about">Click me</div>
</label>
<input id="activate" type="checkbox"></input>
<div class="onabout">Visible while checkbox:checked true or Radiobutton:checked true</div>

checkbox makes you able to click it away. if you don't want that check the input type to radio.

Answer 8

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 9

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

Answer 10

You do NOT need Javascript as many in this thread suggest. Here's how to do it with CSS alone:

(You need to use visibility instead of display)

.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;
}

Answer 11

Here is a jquery solution that hovers over a second level menu item and persistently shows the child third level until you hover over another second level item.

 $("ul.second > li.dropdown").hover(function() {
    // remove the show class if it exists
    $('ul.third').removeClass('show');
    // add the show class only to this child
    $(this).find('.third').addClass('show');
  });

Answer 12

Instead of this:

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

Add this line:

#onabout:hover {
 display: block;
}

So the final code will be like this:

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

just make sure you didn't add margin.