CODEWITHSUNDEEP
javascriptjqueryhtmlcss
xan
xan

Reputation: 4696

Change click event of a clickable div inside another div on changing opacity

I have the HTML structure as follows:

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

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.

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

My code is here on Jsfiddle

If you see the Jsfiddle, I'm still able to click for the .boxes that have faded out or when I'm currently present in home state.

EDIT # 1 Here are the relevant codes:

HTML code

Javascript code

CSS Code

Upvotes: 2

Views: 265

Answers (1)

Anujith
Anujith

Reputation: 9370

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

Upvotes: 2

Related Questions