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类。

禁用选择时的悬停功能

1 个答案: