javascript - Z-index not applying to div – What is wrong with my code? -
i've been working on page day , i'm getting close finishing it, something's not making sense.
i have image centered in <section>
menu @ bottom of image. i've written script when hovering on 1 of <a>
tags in menu, background-image of transparent div on top of changes different image. seems work fine, apart fact image behind centered image part of section. might confusing, can see mean if go top of http://casperfitzhue.co.uk/totemindex.html , hover on "young gods" button.
only half of mask appears on left hand side, if underneath main image, although z-index of div higher 1 of main image shouldn't happen. noticed when checking code in chrome's "inspect element" z-index of div appears crossed out, means not being applied – don't understand why?
this html:
<section id="cover"> <div id="maskover"></div> <img src="coverimage.png" id="coverimage" width="1180" height="800" alt="cover photo"> </section>
this css:
#maskover{ height:424px; width:366px; position:fixed; left:0px; top:0px; z-index:300px; background:none; background-image:url(invisible.png); } section#cover { background:url(noise.png) #170e56; height: 830px; width: 100%; padding: 0px; position: relative; text-align:center; } #coverimage{ width:1180px; position:absolute; top:0px; left:50%; margin-top:0px; margin-left:-590px; z-index:200px; }
and javascript:
$('a#godsnav').hover(function() { $('div#maskover').css('background-image', 'url(overlaymask1.png)'); }, function() { $('div#maskover').css('background-image', ''); });
(a#godsnav menu button)
any amazing! thank you
z-index: 100;
- don't add px
value of property
Comments
Post a Comment