0

How can I keep my divs in the hovered state permanently once initially hovered?

Ideally I need something that is going to work with the existing code (if possible) as there are many instances: 

#cover:hover img{
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
}
Volker E.
  • 5,911
  • 11
  • 47
  • 64
Joesruddock
  • 77
  • 1
  • 7
  • 1
    possible duplicate of [Make CSS Hover state remain after "unhovering"](http://stackoverflow.com/questions/17100235/make-css-hover-state-remain-after-unhovering) (Possible solution is the answer rewarded with [+50]) – Roko C. Buljan Apr 22 '14 at 00:12

1 Answers1

-1

If you are asking to hover over an element, and continue display that element after the cursor has moved away from it, this cannot be done in CSS. It must be done with Javascript.

I would create a class for the state after the image is hovered and before, like so.

 .hover-to-change {
     opacity: 0.0;
      -webkit-transition: all 0.2s ease-in-out;
 }
 .hovered {
     opacity: 1.0;
 }

Then add some jQuery to change the class when the image is hovered.

 $(document).ready(function() {
     $(".hover-to-change").mouseenter(function() {
         $(this).addClass('hovered');
     )};
 });

This should work.

Because CSS is only markup, it will not actually change the state of the HTML or CSS unless it is immediately specified in the page. But the -webkit-transition should work without any additional jQuery.

Palmer
  • 173
  • 9
  • Please use `$(this)` and `.addClass()` method and BTW you only need the `mouseenter` event, no need to use `.hover()` also `$('document')` should be `$(document)`.... – Roko C. Buljan Apr 22 '14 at 00:02