问透明导航栏不能点击任何东西
EN

Stack Overflow用户

提问于 2018-06-03 02:50:58

回答 1查看 30关注 0票数 1

为什么我不能将鼠标悬停在导航栏上并单击任何内容？我想要透明的导航栏与滑动更多的酒吧，当我悬停。有什么想法吗？它看起来像我的导航栏在背景图片后面，如果我改变它的背景，它就会开始崩溃。我只是个初学者，别生气。另外，你如何在导航栏之间留出一个空间，如果我想要在右上方的登录图标或熟悉的东西，我应该怎么做？

body, html {
    height: 100%;
    margin:0;
    font-size:16px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    line-height: 1.8em;
    color:#666;

}

.pimg1, .pimg2, .pimg3 {
    position: relative;
    opacity: 0.7;
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.pimg1 {
    background-image: url("https://images.pexels.com/photos/374870/pexels-photo-374870.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
    min-height: 100%;
}
.pimg2 {
    background-image: url("street.jpg");
    min-height: 400px;
}
.pimg3 {
    background-image: url("aus.jpg");
    min-height: 400px;
}

.section {
    text-align: center;
    padding:50px 80px;
}
.section-light {
    background-color: #f4f4f4;
    color:#666;
}
.section-light {
    background-color: #282e34;
    color:#ddd;
}
.ptext {
    position: absolute;
    top:50%;
    width: 100%;
    text-align: center;
    color:#000;
    font-size:27px;
    letter-spacing: 8px;
    text-transform: uppercase;
}

.ptext .border {
    background-color: #111;
    color: #fff;
    padding:20px;
}
.ptext .border-trans {
    background-color: transparent;
}
@media(max-width: 568px) {
    .pimg1,.pimg2,.pimg3 {
        background-attachment: scroll;
    }
}
a {
    text-decoration: none;
}
ul{
    margin:0px;
    padding:0px;
    list-style:none;
}
ul li {
    float:left;
    width: 200px;
    height: 40px;
    background-color: black;
    opacity: .8;
    line-height: 40px;
    text-align: center;
    font-size:20px;
}

ul li a {
    text-decoration: none;
    color: white;
    display:block;
}

ul li a:hover {
    background-color: blue;

}

ul li ul li {
    display:none;
}
ul li:hover ul li {
    display :block;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Paralex website demo</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        
        <nav>
            <ul>
                    
                <li><a href="index.html"><img class="icon" src="5.jpg"></a></li>
                <li><a>Components</a>
                    <ul>
                        <li><a href="/videocards.html/">Video Cards</a></li>
                        <li><a>Displays</a></li>
                        <li><a>Cpu</a></li>
                        <li><a>Ram</a></li>
                        <li><a>Cooling System</a></li>
                    </ul>
                </li>
                <li><a>Pre Built Computers</a>
                    <ul>
                        <li><a>Laptop Computers</a></li>
                        <li><a>Desktop Computers</a></li>
                    </ul>
                </li>
                <li><a>Contacts</a></li>   
            </ul>
        </nav>

        <div class="pimg1">
            <div class="ptext">
                <span class="border">
                    Beginners Website
                </span>
            </div>
        </div>

        <section class="section section-light">
            <h2>Section one</h2>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae suscipit harum nisi dolore nesciunt labore eaque aliquid ab obcaecati autem, repellendus hic id excepturi dolores earum aspernatur, corporis fuga maxime cumque unde omnis reiciendis soluta. Molestias iste consectetur excepturi quae illum veritatis, enim sit ipsa ipsum nesciunt harum perferendis cupiditate iusto doloribus atque veniam cum qui fugit ducimus alias officia. Repudiandae maiores est quod enim quas, quia omnis pariatur facere exercitationem, ullam ratione, perspiciatis corporis. Saepe enim dicta libero perspiciatis nesciunt, soluta unde. Atque recusandae magni veritatis odit id ducimus. Quam fugit illo quia quod amet assumenda, consectetur tempora ratione.
            </p>
    
    
        </section>

        <div class="pimg2">
                <div class="ptext">
                    <span class="border-trans">
                        Image 2 text
                    </span>
                </div>
        </div>

        <section class="section section-dark">
                <h2>Section one</h2>
                <p>
                    Lorem, ipsum do obcaecati autem, repellendus hic id excepturi dolores earum aspernatur, corporis fuga maxime cumque unde omnis reiciendis soluta. Molestias iste consectetur excepturi quae illum veritatis, enim sit ipsa ipsum nesciunt harum perferendis cupiditate iusto doloribus atque veniam cum qui fugit ducimus alias officia. Repudiandae maiores est quod enim quas, quia omnis pariatur facere exercitationem, ullam ratione, perspiciatis corporis. Saepe enim dicta libero perspiciatis nesciunt, soluta unde. Atque recusandae magni veritatis odit id ducimus. Quam fugit illo quia quod amet assumenda, consectetur tempora ratione.
                </p>
           
           
            </section>
            <div class="pimg3">
                    <div class="ptext">
                        <span class="border-trans">
                            Image 3 text
                        </span>
                    </div>
                </div>
                <section class="section section-light">
                    <h2>Section one</h2>
                    <p>Lorem, ipsum dde omnis reiciendis soluta. Molestias iste consectetur excepturi quae illum veritatis, enim sit ipsa ipsum nesciunt harum perferendis cupiditate iusto doloribus atque veniam cum qui fugit ducimus alias officia. Repudiandae maiores est quod enim quas, quia omnis pariatur facere exercitationem, ullam ratione, perspiciatis corporis. Saepe enim dicta libero perspiciatis nesciunt, soluta unde. Atque recusandae magni veritatis odit id ducimus. Quam fugit illo quia quod amet assumenda, consectetur tempora ratione.</p>
                   
                   
            </section>
                    <div class="pimg1">
                            <div class="ptext">
                                <span class="border">
                                    Beginners Website
                                </span>
                            </div>
                    </div>
    </body>
</html>

javascript

html

css

回答 1

Stack Overflow用户

发布于 2018-06-03 02:59:35

添加此样式

nav {
    position: relative;
    z-index: 1;
}

还可以更改li的背景色。

ul li {
    background-color: transparent;
}

您的nav div涵盖了pimg1元素，因为它是相对的。您还需要在nav元素上设置positon: relative，并给出大于0的任何z-index值。应该能行得通。

body, html {
    height: 100%;
    margin:0;
    font-size:16px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    line-height: 1.8em;
    color:#666;

}
nav {
position: relative;
z-index: 1;
} 
.pimg1, .pimg2, .pimg3 {
    position: relative;
    opacity: 0.7;
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.pimg1 {
    background-image: url("https://images.pexels.com/photos/374870/pexels-photo-374870.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
    min-height: 100%;
}
.pimg2 {
    background-image: url("street.jpg");
    min-height: 400px;
}
.pimg3 {
    background-image: url("aus.jpg");
    min-height: 400px;
}

.section {
    text-align: center;
    padding:50px 80px;
}
.section-light {
    background-color: #f4f4f4;
    color:#666;
}
.section-light {
    background-color: #282e34;
    color:#ddd;
}
.ptext {
    position: absolute;
    top:50%;
    width: 100%;
    text-align: center;
    color:#000;
    font-size:27px;
    letter-spacing: 8px;
    text-transform: uppercase;
}

.ptext .border {
    background-color: #111;
    color: #fff;
    padding:20px;
}
.ptext .border-trans {
    background-color: transparent;
}
@media(max-width: 568px) {
    .pimg1,.pimg2,.pimg3 {
        background-attachment: scroll;
    }
}
a {
    text-decoration: none;
}
ul{
    margin:0px;
    padding:0px;
    list-style:none;
}
ul li {
    float:left;
    width: 200px;
    height: 40px;
    background-color: transparent;
    opacity: .8;
    line-height: 40px;
    text-align: center;
    font-size:20px;
}

ul li a {
    text-decoration: none;
    color: white;
    display:block;
}

ul li a:hover {
    background-color: blue;

}

ul li ul li {
    display:none;
}
ul li:hover ul li {
    display :block;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Paralex website demo</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        
        <nav>
            <ul>
                    
                <li><a href="index.html"><img class="icon" src="5.jpg"></a></li>
                <li><a>Components</a>
                    <ul>
                        <li><a href="/videocards.html/">Video Cards</a></li>
                        <li><a>Displays</a></li>
                        <li><a>Cpu</a></li>
                        <li><a>Ram</a></li>
                        <li><a>Cooling System</a></li>
                    </ul>
                </li>
                <li><a>Pre Built Computers</a>
                    <ul>
                        <li><a>Laptop Computers</a></li>
                        <li><a>Desktop Computers</a></li>
                    </ul>
                </li>
                <li><a>Contacts</a></li>   
            </ul>
        </nav>

        <div class="pimg1">
            <div class="ptext">
                <span class="border">
                    Beginners Website
                </span>
            </div>
        </div>

        <section class="section section-light">
            <h2>Section one</h2>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae suscipit harum nisi dolore nesciunt labore eaque aliquid ab obcaecati autem, repellendus hic id excepturi dolores earum aspernatur, corporis fuga maxime cumque unde omnis reiciendis soluta. Molestias iste consectetur excepturi quae illum veritatis, enim sit ipsa ipsum nesciunt harum perferendis cupiditate iusto doloribus atque veniam cum qui fugit ducimus alias officia. Repudiandae maiores est quod enim quas, quia omnis pariatur facere exercitationem, ullam ratione, perspiciatis corporis. Saepe enim dicta libero perspiciatis nesciunt, soluta unde. Atque recusandae magni veritatis odit id ducimus. Quam fugit illo quia quod amet assumenda, consectetur tempora ratione.
            </p>
    
    
        </section>

        <div class="pimg2">
                <div class="ptext">
                    <span class="border-trans">
                        Image 2 text
                    </span>
                </div>
        </div>

        <section class="section section-dark">
                <h2>Section one</h2>
                <p>
                    Lorem, ipsum do obcaecati autem, repellendus hic id excepturi dolores earum aspernatur, corporis fuga maxime cumque unde omnis reiciendis soluta. Molestias iste consectetur excepturi quae illum veritatis, enim sit ipsa ipsum nesciunt harum perferendis cupiditate iusto doloribus atque veniam cum qui fugit ducimus alias officia. Repudiandae maiores est quod enim quas, quia omnis pariatur facere exercitationem, ullam ratione, perspiciatis corporis. Saepe enim dicta libero perspiciatis nesciunt, soluta unde. Atque recusandae magni veritatis odit id ducimus. Quam fugit illo quia quod amet assumenda, consectetur tempora ratione.
                </p>
           
           
            </section>
            <div class="pimg3">
                    <div class="ptext">
                        <span class="border-trans">
                            Image 3 text
                        </span>
                    </div>
                </div>
                <section class="section section-light">
                    <h2>Section one</h2>
                    <p>Lorem, ipsum dde omnis reiciendis soluta. Molestias iste consectetur excepturi quae illum veritatis, enim sit ipsa ipsum nesciunt harum perferendis cupiditate iusto doloribus atque veniam cum qui fugit ducimus alias officia. Repudiandae maiores est quod enim quas, quia omnis pariatur facere exercitationem, ullam ratione, perspiciatis corporis. Saepe enim dicta libero perspiciatis nesciunt, soluta unde. Atque recusandae magni veritatis odit id ducimus. Quam fugit illo quia quod amet assumenda, consectetur tempora ratione.</p>
                   
                   
            </section>
                    <div class="pimg1">
                            <div class="ptext">
                                <span class="border">
                                    Beginners Website
                                </span>
                            </div>
                    </div>
    </body>
</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50660118

复制

相似问题

问透明导航栏不能点击任何东西
EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问透明导航栏不能点击任何东西EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问透明导航栏不能点击任何东西
EN