当不透明度为0时，在div内隐藏可点击的链接 [英] Hide clickable links inside div when opacity is 0

问题描述

我有 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 code> opacity：0 。

The class .boxes are squares set next to one another. There are about 30 boxes. Initially all the boxes are set to opacity:1 and all the -button class are set at opacity:0.

然而，如果我将鼠标悬停在 .boxes ，可以点击链接。

However, then also if I hover my mouse inside the .boxes, the links are clickable.

我的 .navi 菜单：

<div id="navi">
    <a href="#"><div id="t0"><span>Home</span></div></a>
    <a href="#"><span>Events</span></a>
    <a href="#"><span>Gallery</span></a>
    <a href="#"><span>Exhibitions</span></a>
</div>

我的 javascript c $ c> opacity 。

My javascript code for changing the opacity.

    <script type="text/javascript">
    var isHome = true;
        $(function () {

            $("#navi a").click(function() {
                c = $(this).text().toLowerCase();
                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").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 );
                }
            });
        });
</script>

如何删除点击 -button 元素，当它们不可见时？

How can I remove the click event of the -button elements when they are not visible?

编辑＃1
我不必点击 .-按钮元素。

当我点击 home 时，所有 .boxes 应出现，但每个 .boxes < a> ..< / a> >不可点击。
如果我点击 .events ，只有 .boxes 与类： .events 应出现与<$ c $的元素 < a> ...< / a> c> .events-button class [现在应该可以点击了。]

When I click home, all .boxes should appear, but the <a>..</a> elements in each .boxes must not be clickable. Then if I click .events, only the .boxes with class: .events should appear alongwith <a>...</a> elements having .events-button class[and they should be clickable now.]

Jsfiddle在这里

推荐答案

工作演示

$('a[class="button"]').click(function(e){ // <--- don't miss this e
    if ($(this).css('opacity')==0) e.preventDefault();
});

这篇关于当不透明度为0时，在div内隐藏可点击的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！