javascript - jQuery 将鼠标悬停在不透明度上并单击停留在不透明度上

Question

早上好

所以我有以下 2 个片段，除了一件我无法解决的事情外，它们工作得很好。第一个是悬停状态，所以当您悬停时，不透明度为 100%，默认情况下为 70%，当您将鼠标移开时，它恢复为 70%，这很好，第二个是点击功能，点击时显示选中的图像很好，不透明度保持在 100%，但是当您将鼠标移出容器时，它会恢复到 70% 的不透明度。无论如何，无论您是否将鼠标移开，点击它都会保持在 100% 吗？

$(".opacity-change img").css('opacity','0.7');
$(document).ready(function(){
    $(".opacity-change img").hover(
    function() {
        $(this).animate({ opacity: 1 }, 500);
    },
    function() {
        $(this).animate({ opacity: 0.7 }, 500); 
    });
});

$(document).ready(function(){
    $('.profiles a').bind('click',function(){
        $('.checked').hide();
        $(this).find('.checked').show();
    });
});

提前致谢

Answer 1

这将向名为“clicked”的单击元素添加一个类。在悬停功能上，它检查元素是否已分配 til 类。如果类不存在，它将以动画方式返回到 70% 的不透明度。

$(".opacity-change img").css('opacity','0.7');
$(document).ready(function(){
    $(".opacity-change img").hover(
    function() {
        $(this).animate({ opacity: 1 }, 500);
    },
    function() {
        if ( !$(this).hasClass( 'clicked' ) ){
            $(this).animate({ opacity: 0.7 }, 500); 
        }
    });
});

$(document).ready(function(){
    $('.profiles a').bind('click',function(){
        $('.checked').hide();
        $('.clicked').css("opacity", 0.7).removeClass('clicked');
        $(this).find('.checked').show();
        $(this).addClass( 'clicked' );
    });
});