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 中，链接也是可点击的。

My code is here on Jsfiddle

如果您看到 Jsfiddle，我仍然可以单击 已淡出的 .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();
            }
        });
    });