透明导航条不能点击任何东西如何解决?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (118)

为什么我不能将鼠标悬停在导航栏上并点击任何内容?当我悬停时,我想要滑动更多酒吧的透明导航栏。有任何想法吗?

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>
提问于
用户回答回答于

添加这种风格

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

还要更改li的背景颜色

ul li {
    background-color: transparent;
}

你的pimg1div覆盖nav元素,因为它的相对性。需要设置positon: relative

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 粉丝490 提问6 回答
  • o o

    4 粉丝495 提问5 回答
  • 找虫虫

    5 粉丝0 提问5 回答
  • uncle_light

    5 粉丝518 提问4 回答

扫码关注云+社区

领取腾讯云代金券