Jquery disables css :hover effect

Question

I have several linked photos that are set to be (opacity: 0.45) except on hover and when clicked (opacity:1). I also have a JQuery function listening for clicks, which will then change the css of the clicked photo to be (opacity:1) and the rest back to (opacity: 0.45). However once the function runs the hover effect is disabled somehow. Any ideas?

HTML:

<a class="img_thumbs"><img src="someimage.jpg"></a>

CSS:

.img_thumbs:hover {
      opacity:1;
}

.img_thumbs {
      opacity:0.45;
}

JQuery:

$('.img_thumbs').click(function(){
    event.preventDefault();
    $('.img_thumbs').css({'opacity': '0.45'});
    $(this).css({'opacity': '1'});
}):

I have tried:

• adding the JQuery .hover() effect in and outside of the function
• changing the selectors, css, html to a.img_thumbs, individually and together
• looking for where the code fails

That function also runs an AJAX call and several other listeners, but ive determined they do not have any adverse effects (commented them out), so the problem lies only in the code I've provided.

An alternate solution would also be gratefully accepted, Thanks in advance.

Answer 1

use this:

CSS:

.img_thumbs:hover {
  opacity:1;
}
.active {
      opacity:1 !important;
}
.img_thumbs {
      opacity:0.45;
}

JS:

$('.img_thumbs').click(function(event){
    event.preventDefault();
    $('.img_thumbs').removeClass( "active" )
    $(this).addClass( "active" );
});

The tips is use other active class, and add or remove this class, when click.