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

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。

但是，如果我将鼠标悬停在 .boxes 内，链接也是可点击的。

我的代码在 Jsfiddle 上

如果您看到 Jsfiddle，我仍然可以click为.boxes那些已经淡出或当我目前处于home状态时。

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

HTML 代码

Javascript代码

CSS 代码

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();
            }
        });
    });