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.

So currently your problem is the hover opacity not working after clicking on the image? Your jsfiddle seems working though. — user2424370
– user2424370, Commented May 6, 2014 at 2:10
well in my actual project when i select a photo it changes the opacity to 1 and the other photos remain opaque, but then the hover effect no longer works... jsfiddle.net/C8R7f/1 — SocaBlood
– SocaBlood, Commented May 6, 2014 at 2:12
Wondering why are you are doing the prevent default on clicking an img? Maybe that is messing with it, could try taking it out. — Andrew
– Andrew, Commented May 6, 2014 at 2:12

Pablo Veintimilla Vargas · Accepted Answer · 2014-05-06 02:19:41Z

2

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.

answered May 6, 2014 at 2:19

Pablo Veintimilla Vargas

3234 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pablo Veintimilla Vargas Over a year ago

In your code the state of click element was not registred, therefore the strange behavior

Sunil B N Over a year ago

"!important" overwrites the other css created by jQuery

Collectives™ on Stack Overflow

Jquery disables css :hover effect

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related