Having a dilemma with linked photos on my website. I have set their opacity to 0.45 by default, but want them to change to full opacity (1) when hovered over or clicked. I've implemented a JQuery function that resets the rest of the photos back to 0.45 opacity when one is clicked, however, this seems to disable the hover effect. Any suggestions on how to fix this issue?
Here is the HTML code:
<a class="img_thumbs"><img src="someimage.jpg"></a>
CSS styling for the images:
.img_thumbs:hover {
opacity: 1;
}
.img_thumbs {
opacity: 0.45;
}
JQuery script being used:
$('.img_thumbs').click(function(){
event.preventDefault();
$('.img_thumbs').css({'opacity': '0.45'});
$(this).css({'opacity': '1'});
});
I have attempted various solutions including:
- Adding the .hover() method inside and outside the function in JQuery
- Experimenting with different selectors, CSS, and HTML classes like a.img_thumb
- Debugging to identify where the problem occurs
The mentioned function also involves an AJAX call and other listeners, but after isolating them, it appears the issue lies within the provided code snippet only.
If you have any alternative solutions, they would be greatly appreciated. Thank you in advance for your assistance!