Jquery 在选择时禁用悬停功能

我目前正在尝试建立一个缩略图库，允许用户突出显示某个类别的缩略图，但当未选择任何类别或未突出显示的缩略图时，突出显示将显示在悬停状态

悬停函数

$(window).load(function(){
$('.print, .campaign, .identity, .photography').each(function(){  
$(this).css('opacity', 0);
$(this).css('display', 'block');  
});  

$('.box_print, .box_campaign, .box_identity, .box_photography').hover(function(){  
$(this).children('.print, .campaign, .identity, .photography').stop().fadeTo(300, 4);  
},function(){  
$(this).children('.print, .campaign, .identity, .photography').stop().fadeTo(000, 0);  
}); 

}); 

类别函数

    $(document).ready(function(){

    $(".cat-all").click(function(){
    $(this).css('font-weight', 'bold')
    $(".cat-print, .cat-identity, .cat-photography, .cat-campaign").css('font-weight', 'normal')
    $(".print, .identity, .photography, .campaign").fadeTo(100, 0);
    $(this).toggleClass("active"); return false;
});

$(".cat-print").click(function(){
    $(this).css('font-weight', 'bold')
    $(".cat-all, .cat-identity, .cat-photography, .cat-campaign").css('font-weight', 'normal')      
    $(".print").fadeTo(600, 4);
    $(".identity, .photography, .campaign").fadeTo(100, 0);
    $(this).toggleClass("active"); return false;
});


$(".cat-identity").click(function(){
    $(this).css('font-weight', 'bold')
    $(".cat-all, .cat-print, .cat-photography, .cat-campaign").css('font-weight', 'normal')     
    $(".identity").fadeTo(600, 4);
    $(".print, .photography, .campaign").fadeTo(100, 0);
    $(this).toggleClass("active"); return false;
});


$(".cat-photography").click(function(){
    $(this).css('font-weight', 'bold')
    $(".cat-all, .cat-print, .cat-identity, .cat-campaign").css('font-weight', 'normal')        
    $(".photography").fadeTo(600, 4);
    $(".identity, .print, .campaign").fadeTo(100, 0);
    $(this).toggleClass("active"); return false;
});


$(".cat-campaign").click(function(){
    $(this).css('font-weight', 'bold')
    $(".cat-all, .cat-print, .cat-photography, .cat-identity").css('font-weight', 'normal')     
    $(".campaign").fadeTo(600, 4);
    $(".identity, .photography, .print").fadeTo(100, 0);
    $(this).toggleClass("active"); return false;
});

}); 

JS小提琴-

如果你已经看过了，我最不知道的是如何仅在类别选择中突出显示的缩略图上禁用悬停功能

---

从我一直试图阅读的内容来看，我有一种感觉，它可能与事件名称空间有关，使我能够绑定和解除绑定hover函数？但我不确定，如果有人能给我指出正确的方向，我会很感激的

如果我很了解你-我有一个解决方案给你：

执行悬停功能时：

$('.box_print, .box_campaign, .box_identity, .box_photography').hover(function () {
        //when mouse hover over the wrapper div  
        //get it's children elements with class description '  
        //and show it using fadeTo  
        $(this).children('.print, .campaign, .identity, .photography').stop().fadeTo(300, 4);
    }, function () {
        //when mouse out of the wrapper div  
        //use fadeTo to hide the div  
        $(this).children('.print, .campaign, .identity, .photography').stop().fadeTo(0, 0);
    });

而不是调用每个缩略图类，如下所示：

$('.box_print, .box_campaign, .box_identity, .box_photography')

$('.box')

您可以向所有缩略图添加相同的类，并执行如下悬停功能：

$('.box_print, .box_campaign, .box_identity, .box_photography')

$('.box')

---

然后，当用户选择一个类别时，从当前类别的所有缩略图中删除

.box

类。

我忘了提到，每个类别都有一种颜色，这就是为什么有4个不同的方框类。@Kimberley-因此您可以只向类别的每个div添加一个类：

-这不重要，也不会更改div的颜色。（如果有帮助，请将其标记为答案）