0

我整天都在处理这个页面，我快要完成它了，但是有些东西没有意义。

我有一个以 a 为中心的图像<section>，图像底部有一个菜单。我编写了一些脚本，以便将鼠标悬停<a>在菜单中的一个标签上时，位于所有内容之上的透明 div 的背景图像会更改为不同的图像。除了图像位于作为该部分一部分的居中图像的后面之外，它似乎工作正常。这可能会令人困惑，但是如果您转到http://casperfitzhue.co.uk/totemindex.html的顶部并将鼠标悬停在“Young Gods”按钮上，您就会明白我的意思。

只有一半的蒙版出现在左侧，就好像它在主图像下方一样，尽管 div 的 z-index 高于主图像的 z-index 所以这不应该发生。在检查 Chrome 的“检查元素”中的代码时，我还注意到 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', '');
});

（a#godsnav 是菜单按钮）

对此的任何帮助将是惊人的！谢谢

4

1 回答 1

5

z-index: 100;- 不要增加px这个属性的值

于 2013-05-08T22:18:35.550 回答