Question

我制作一个覆盖另一个div的透明div有一个小问题。当用户将鼠标悬停在原始div上时，我需要透明div显示在另一个div上。我设法让透明div显示在第一个上面，但是当鼠标离开时透明div保持结束。我很清楚为什么会发生这种情况，封面位于第一个div的顶部，如果鼠标离开原来的div，jquery就不能再检测到了，我试过这两个版本

$("#top_content").hover(function(){
    $("#top_cover").css("opacity","0.35"); 
}, function(){
    $("#top_cover").css("display","0"); 
});

$("#top_cover").hover(function(){
    $("#top_cover").css("opacity","0.35"); 
}, function(){
    $("#top_cover").css("display","0"); 
});

两者都可以添加封面，但不能删除封面。这是jsfidle http://jsfiddle.net/HjW53/

编辑我不能相信我是多么愚蠢，我开始使用display none / block然后转到opacity解决方案并忘记将显示更改为不透明度。感谢您的解决方案。

Answer 1

你在第二个陈述中宣布了一些错误。这是最简单的修复方法。只需重新设置opacity值，而不是显示。

http://jsfiddle.net/HjW53/4/

$("#top_content").hover(function(){
    $("#top_cover").css("opacity","0.35"); 
}, function(){
    $("#top_cover").css("opacity","0"); 
});

使用display:none或0的问题在于hidden中的DOM，因此您永远无法再hover次第一场火灾。

Answer 2

根本不需要编写脚本..

只需添加此css规则

#top_content:hover #top_cover{
    opacity:0.35;
}

演示http://jsfiddle.net/gaby/HjW53/5/

代码上的实际错误并不是jquery无法检测到重叠由于#top_cover是#top_content的子项，因此它始终会触发所有父项的悬停事件..（除opacity之外不会影响悬停事件.. ）所以如果它能够设置不透明度，它可以解决它..

问题在于"display","0"

它应该是"display","none"（，但它只能在第一次工作）或在两种情况下使用相同的属性，因此"opacity","0"

Answer 3

$("#top_cover").css("display","0");似乎不起作用，我将0替换为none，它就像一个魅力。

以下是更新版本：

$("#top_content").hover(function(){
    $("#top_cover").css("opacity","0.35"); 
}, function(){
    $("#top_cover").css("display","none"); 
});

jquery切换透明封面

3 个答案:

http://jsfiddle.net/HjW53/4/