小编Cas*_*r F的帖子

我整天都在这个页面上工作,我已经接近完成它,但是有些事情没有意义.

我有一个图像居中,图像<section>底部有一个菜单.我写了一些脚本,以便当<a>鼠标悬停在菜单中的一个标签上时,位于所有内容之上的透明div的背景图像会变为另一个图像.它似乎工作得很好,除了图像是在中心图像后面,这是该部分的一部分.这可能会让人感到困惑,但是如果你走到http://casperfitzhue.co.uk/totemindex.html的顶部并将鼠标悬停在"Young Gods"按钮上,你就会明白我的意思.

只有一半的掩模出现在左侧,就好像它位于主图像的下方,尽管div的z-index高于主图像的z-index,所以这不应该发生.我还注意到在检查Chrome的"Inspect Element"中的代码时,Div的z-index似乎被划掉了,这意味着它没有被应用 - 我不明白为什么？

这是HTML:

 <section id="cover">
  <div id="maskover"></div>
   <img src="coverimage.png" id="coverimage" width="1180" height="800" alt="cover photo">   
 </section>

这是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;
}

这是JAVASCRIPT:

$('a#godsnav').hover(function() {
  $('div#maskover').css('background-image', 'url(overlaymask1.png)');
}, function() {
  $('div#maskover').css('background-image', '');
});

(#godsnav是菜单按钮)

任何帮助都会很棒!谢谢