2

I have small problem with making a transparent div covering another div. I need the transparent div to appear over another div when the user hovers the mouse over the original div. I managed to make the transparent div appear over the first one but when the mouse leaves the transparent div stays over. I have a pretty good idea why is this happening, the cover is on the top of the first div and jquery can`t detect anymore if the mouse left the original div, I tried this two versions

$("#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"); 
});

Both work with adding the cover, but neither with removing it. And here is the jsfidle http://jsfiddle.net/HjW53/

EDIT I can`t believe how dumb I am, I started with display none/block but then gone to opacity solution and forgot to change display to opacity. Thank you for the solutions.

0

3 Answers 3

2

You declared something wrong in your second statement. Here is the easiest fix. Just reset the opacity value again, instead of display.

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

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

The problem with using display:none or 0 is that it will be hidden from the DOM, so you will never be able to hover again after the first fire.

2

No need for scripting at all..

just add this css rule

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

demo at http://jsfiddle.net/gaby/HjW53/5/


The actual error on your code though was not that jquery could not detect the overlap.
Since the #top_cover is a child of #top_content it will always trigger hover events on all its parents.. (besides the opacity does not affect the hover events..) so if it worked to set the opacity it would work with unsetting it..

The problem was with the "display","0"

It should either be "display","none" (but it would only work the first time) or use the same property on both cases, so "opacity","0"

1
  • This is definitely the quicker solution compared to mine. Just tried to fix the existing problem :-P Nice job @Gaby. Either of our solutions work, but if you have a CSS solution instead of a JS one, your page will render quicker. Jan 16, 2014 at 1:23
-1

$("#top_cover").css("display","0"); seems to not work, I replaced the 0 by none and it worked like a charm.

Here's the updated version:

$("#top_content").hover(function(){
    $("#top_cover").css("opacity","0.35"); 
}, function(){
    $("#top_cover").css("display","none"); 
});
1
  • 1
    If you add a display:none; it will not reactivate again, because it is hidden from the DOM Jan 16, 2014 at 1:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.