CODEWITHSUNDEEP
jqueryhtmlcss
Nips
Nips

Reputation: 13870

how to overshadow page?

I have html with jquery function hover:

$('#mydiv').hover(function(){
    $('#overlayer').show();
    $('#somediv').show();
}),function(){
    $('#overlayer').hide();
    $('#somediv').hide();
});

$('#somediv').hover(function(){
    $('#somediv').show();
});

html:

<div id="overlayer" style="background: url('1pxb.png') repeat; position: absolute; 
    top: 0px; left: 0px; width: 1000px; height: 1000px; display: none; 
    z-index: 3000;"></div>
...
<div>
<div id="mydiv"> ... </div> (z-index: 5000)
<div id="somediv"> ... </div> (z-index: 5000)
</div>

I want to overshadow all page without this divs but it cover all page and I'm losing control of .hover(). Z-index not working. How to do it?

Upvotes: 1

Views: 149

Answers (1)

Marat Tanalin
Marat Tanalin

Reputation: 14123

Try to use pointer-events: none for your overlay (take into account that it does not work in IE8 and is buggy in IE9) to make the overlay "transparent" for mouse events.

Upvotes: 1

Related Questions