我的 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
是彼此相邻的方 block 。大约有30个盒子。最初,所有框均设置为 opacity:1
,所有 -button
类均设置为 opacity:0
。
但是,如果我将鼠标悬停在 .boxes 内,链接也可以单击。
如果您看到 Jsfiddle,我仍然可以单击
已淡出的 .boxes
或当我当前位于 home 中时
状态。
编辑#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();
}
});
});
关于javascript - 在更改不透明度时更改另一个 div 内可点击 div 的点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14179943/