Javascript 更改不透明度时另一个分区内可单击分区的更改单击事件

我的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>

类

.box

是相邻设置的正方形。大约有30个盒子。最初，所有框设置为

不透明度：1

，所有

-按钮

类设置为

不透明度：0

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

如果您看到JSFIDLE，我仍然能够

单击
以查看已淡出的
.box
，或者当我当前处于
主页
状态时

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



请参见：

我看不到JSFIDLE上的CSS，也看不到JavaScript。我认为您有一些主要的浮动问题……您发布的JSFIDLE在框外有一些链接。@GamesBrainiac:代码在那里。所有的HTML、CSS和Javascript文件。@Bagavatu:不关心浮动问题。这与问题无关。@xan，我可以看到输出，但看不到代码：（这是可行的。不过，这仍然是一个小问题。如果你点击
事件
，然后点击
主页
，它们又可以点击了。只要在
If（isHome）{..
：
$（'.box'）。查找（'a'）。隐藏（）；
是的，很好..我正要更新它..现在更新..无论如何，很高兴能帮上忙...）
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();
            }
        });
    });