Question

我的HTML结构如下：

<div class="boxes workshops wrapl">
    <a href="#" id="showw1" class="workshops-button lfloat">Show it</a>
</div>

<div class="boxes exhibitions">
    <a href="#" id="showex1" class="exhibitions-button lfloat">Show it</a>
</div> 
<div class="boxes gallery">
    <a href="#" id="showex1" class="gallery-button lfloat">Show it</a>
</div>

班级.boxes是彼此相邻的正方形。大约有30个盒子。最初，所有框都设置为opacity:1，所有-button类都设置为opacity:0。

然而，如果我将鼠标悬停在.box中，链接也是可点击的。

My code is here on Jsfiddle

如果你看到Jsfiddle，我仍然可以click为.boxes已经淡出或当我目前在home州。

编辑＃1 以下是相关代码：

HTML code

Javascript code

CSS Code

Answer 1

请参阅：http://jsfiddle.net/qGpML/5/

var isHome = true;
    $(function () {
$('.boxes').find('a').hide();
        $("#navi a").click(function() {
            c = $(this).text().toLowerCase();
           $('.boxes').find('a').show();
            isHome = c=="home";
            if (isHome){
                $('.events-button, .workshops-button, .gallery-button, .sponsors-button, .hospitality-button, .lectures-button, .exhibitions-button').animate({opacity:0.0},500);
                $('.boxes').find('a').hide();
                $(".boxes").animate({opacity: 1.0}, 500 );

            } else {
                $('.' + c).animate({opacity: 1.0}, 500 );
                $('.' + c + "-button").animate({opacity: 1.0}, 500 ).addClass('activehack');
                $('.activehack').not('.' + c + "-button").animate({opacity: 0.0}, 500 );
                $('.boxes').not('.' + c).animate({opacity: 0.3}, 500 );
        $('.boxes').not('.' + c ).find('a').hide();
            }
        });
    });

在更改不透明度时更改另一个div中可点击div的单击事件

1 个答案: