Question

我有一个问题，我的导航菜单上出现了图像。我有一个固定的导航菜单，它停留在窗口的顶部，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-->

Relvent Style：

    #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;
    }

Answer 1

如果我以正确的方式理解您希望#nav-container始终与图片重叠;然后你需要属性 z-index 来管理元素的级别，尝试在CSS上添加它：

#nav-container {
  z-index:1;
}

不透明度降低时，导航菜单上方出现的图像

1 个答案: