Jquery 禁用 css :hover 效果

Question

我有几张链接的照片设置为（不透明度：0.45），除了悬停和点击时（不透明度：1）。我还有一个 JQuery 函数来监听点击，然后将点击照片的 css 更改为（不透明度：1），其余的改回（不透明度：0.45）。然而，一旦函数运行，悬停效果就会以某种方式被禁用。有什么想法吗？

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'});
}):

我试过了：

• 在函数内外添加 JQuery .hover() 效果
• 将选择器、css、html 分别和一起更改为 a.img_thumbs
• 寻找代码失败的地方

该函数还运行 AJAX 调用和其他几个侦听器，但我确定它们没有任何不利影响（已将它们注释掉），因此问题仅在于我提供的代码。

也将不胜感激地接受替代解决方案，提前致谢。

Answer 1

使用这个：

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" );
});

提示是使用其他活动类，点击时添加或删除该类。