1

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

悬停功能

$(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/

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

根据我一直在阅读的内容，我感觉它可能与事件命名空间有关，使我能够绑定和取消绑定悬停功能？但我不确定，如果有人能指出我正确的方向，我会很感激的！

4

1 回答 1

0

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

当您执行悬停功能时：

$('.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从当前类别的所有缩略图中删除类别。

于 2013-02-17T14:05:14.973 回答