选择时禁用悬停功能

Question

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

悬停功能

$(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小提琴- http://jsfiddle.net/XL3G3/5/

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

根据我一直在努力阅读的内容，我有一种感觉，它可能与事件命名空间有关，从而使我能够绑定和解除绑定悬停函数？但我不确定，如果有人能给我指出正确的方向，我会很感激的！

Answer 1

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

执行悬停功能时：

$('.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类。