gpt4 book ai didi

javascript - Z-index 不适用于 div – 我的代码有什么问题?

转载 作者:太空宇宙 更新时间:2023-11-03 20:50:34 24 4
gpt4 key购买 nike

我一整天都在处理这个页面,我快要完成它了,但是有些地方没有意义。

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

虽然 div 的 z-index 高于主图像的 z-index,但只有一半的 mask 出现在左侧,就好像它在主图像下方一样,所以这不应该发生。在检查 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 是菜单按钮)

任何对此的帮助都会很棒!谢谢

最佳答案

z-index: 100; - 不要将 px 添加到此属性的值

关于javascript - Z-index 不适用于 div – 我的代码有什么问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16451145/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com