我的导航菜单上出现图像时遇到问题。我有一个固定的导航菜单,它位于窗口的顶部,页面下方有 8 个不透明度设置为 0.7 的图像。当您悬停时,图像的不透明度会变为 1.0,如果您向下滚动导航菜单上方的图像,除非我将鼠标悬停在它们上方,否则它们会像应有的那样出现在导航下方。 我将向您展示我的导航代码和 8 张图片中的一张,也许有人可以提供帮助。这是我第一次发帖,我希望一切都正确发布。
导航:
<div id="nav-container">
<div id="nav">
<ul>
<li><a href="#bg1" class="smoothScroll">Home</a></li>
<li><a href="#bg2" class="smoothScroll">Folio</a></li>
<li><a href="#bg3" class="smoothScroll">About</a></li>
<li><a href="#bg4" class="smoothScroll">Contact</a></li>
</ul>
</div>
</div>
图片:
<div id="bg2">
<div class="content-title">
<h2>Folio</h2>
<p> This is what I do </p>
<div class="content-area">
<div class="folio-item">
<img src="images/folio/folio1.png" alt="some_text">
</div>
</div> <!-- content-area close-->
</div> <!-- content-title close-->
相关风格:
#nav-container {
width:100%;
height:50px;
box-shadow: 0px 1px 50px #464646;
position:fixed;
top:0px;
background-image: url(images/bggrey.png);
}
#nav {
font-size: 14px;
text-align: center;
line-height: 50px;
}
#nav li{
text-decoration: none;
text-align: center;
display: inline;
padding: 10px;
margin-left: 40px;
margin-right: 40px;
}
#nav a{
text-decoration: none;
color: rgb(250,250,250);
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#nav a:visited{
text-decoration: none;
color: rgb(250,250,250);
}
#nav a:hover{
text-decoration: none;
color: rgb(250,250,250);
opacity: 0.7;
}
#nav a:active{
text-decoration: none;
color: rgb(250,250,250);
}
#bg1 {
background-image: url(images/bubble.png);
background-repeat:no-repeat;
background-position: center;
height: 800px;
margin: -1;
}
.content-title {
width: 960px;
margin: auto;
font-size: 20px;
color: white;
text-align: center;
padding-top: 70px;
}
.content-title p{
font-size: 14px;
}
.content-area {
border: 1px dashed black;
height: 500px;
width: 960px;
margin: auto;
margin-top: 50px;
font-size: 0px;
}
.folio-item {
float: left;
opacity: 0.7;
}
.folio-item:hover {
opacity: 1.0;
transition: opacity .3s ease-out;
-moz-transition: opacity .3s ease-out;
-webkit-transition: opacity .3s ease-out;
-o-transition: opacity .3s ease-out;
}
最佳答案
如果我以正确的方式理解您希望您的 #nav-container
始终与图像重叠;那么您需要属性 z-index 要管理元素的级别,请尝试在 CSS 上添加:
#nav-container {
z-index:1;
}
关于css - 当不透明度降低时,图像出现在导航菜单上方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20977985/