Make CSS on-hover content on image stay when you click on it

Question

My question is similar to this one : How can you make CSS on-hover content stay in place when you click or stop hovering using Javascript?

However, i did not understand well the solutions that were proposed.

So basically, i would like my CSS on-hover content to stay on top of my image when the user clicks on it. Could someone please tell me how to do so?

#core {
  max-width: 960px;
  margin-top: 25px;
}
ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
ul.img-list li {
  display: inline-block;
  height: 120px;
  margin: 0 1em 1em 0;
  position: relative;
  width: 120px;
}
span.background-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
ul.img-list li:hover span.background-content {
  opacity: 1;
}
span.background-content {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 120px;
  left: 0;
  position: absolute;
  top: 0;
  width: 120px;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}
/* --------------------------------------------------------- */

span.title-content-platinum {
  background: rgba(215, 215, 0, 0.8);
  color: white;
  cursor: pointer;
  display: table;
  height: 20px;
  left: 0;
  position: absolute;
  top: -20px;
  width: 120px;
}
span.title-content-platinum span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
span.title-content-platinum {
  background: rgba(215, 215, 0, 0.8);
  color: white;
  cursor: pointer;
  display: table;
  height: 20px;
  left: 0;
  position: absolute;
  top: -20px;
  width: 120px;
  opacity: 0;
}
ul.img-list li:hover span.title-content-platinum {
  opacity: 1;
}
span.title-content-platinum {
  background: rgba(215, 215, 0, 0.8);
  color: white;
  cursor: pointer;
  display: table;
  height: 20px;
  left: 0;
  position: absolute;
  top: -20px;
  width: 120px;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

<div id="core">
  <ul class="img-list">
    <li>
      <a>
        <a href="">
          <img src="http://www.pokepedia.fr/images/thumb/e/e7/Pikachu-RFVF.png/120px-Pikachu-RFVF.png" alt="" width="120" height="120" />
        </a>
        <span class="title-content-platinum">Pikachu</span>
        <span class="background-content"><span></span></span>
      </a>
    </li>
  </ul>
</div>

I'm also learning Javascript (without Jquery for the moment), so a solution involving jscript would be much appreciated!

Do you mean that once you hover, you want the span overlays to stay visible even when you unhover? — showdev, Oct 02 '14 at 18:07
I would like the span overlays to stay visible onclick and stay that way until i click once again on the image. — Macjeje, Oct 02 '14 at 18:11

score 3 · Accepted Answer · edited May 23 '17 at 12:05

Here's a simple example using JS to add a CSS class to an element based on it's id. I use the HTML onclick attribute to call a javascript function, and pass in the HTML id to find the element and add the class. You should be able to adjust this to apply it to your situation.

Demo: http://jsfiddle.net/biz79/swxxLj3z/

Update: I've switched it to a toggleClass so that click1 adds the class and click2 removes the class. This code should be able to handle tags that have more than 1 class as well.

There's more elegant solutions on SO which you can look up, however, this will probably work for you in the meantime.

This looks like a good resource: Change an element's class with JavaScript

Anyways, just adjust to fit your purposes. Cheers!

HTML:

<div id='d1' onclick="toggleClass('d1')" class="class1 class2">Hello</div>
<div id='d2' onclick="toggleClass('d2')">there</div>

JS:

function toggleClass( ID ) {
   var classToAdd = 'bigFont';
   var el = document.getElementById(ID);
   var classes = el.className;
   var index = classes.indexOf(classToAdd);

   if (index < 0) {
       el.className += " " + classToAdd;
   }
   else {
     classes = classes.replace(classToAdd, " ");
     el.className = classes;
   }
}

CSS:

div:hover {
    font-size:2em;
}

.bigFont {
    font-size:2em;
}

Thank you, would there be a way to revert back to the original font by clicking on "there" again ? — Macjeje, Oct 02 '14 at 18:18
Removing the class is actually a bit harder, but do-able. Do you need to support older browsers like ie8 or 9? Also, will the spans have other classes on it? — Will, Oct 02 '14 at 18:20
I dont mind if older versions of ie are'nt supported. The spans won't have other classes. — Macjeje, Oct 02 '14 at 18:22
Okay give this a try. This should handle additional classes as well, but it's not as elegant as some other solutions on SO. http://jsfiddle.net/biz79/swxxLj3z/6/ — Will, Oct 02 '14 at 18:30

score 0 · Answer 2 · answered Oct 02 '14 at 18:11

You'd first want to modify your css to take a class that denotes whether an item has been clicked Here I use '.active-item'

ul.img-list li:hover span.background-content, 
.active-item span.background-content
{

    opacity: 1;
}

You'd then want to apply the active-item class using element.setAttribute() like so

var items = document.getElementByTagName("li");

for (index = 0; index < items.length; ++index) {
    items[index].onmouseclick = function() {
        items[index].setAttribute("class", "active-item");\
    } 
}

Make CSS on-hover content on image stay when you click on it

2 Answers2