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

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 2

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 3

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.