javascript - 透明导航栏不能点击任何东西

标签 javascript html css

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

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

您的 pimg1 div 覆盖了 nav 元素，因为它是相对的。您还需要在 nav 元素上设置 positon: relative 并赋予 z-index 大于 0 的任何值。它应该可以工作。

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>

关于javascript - 透明导航栏不能点击任何东西，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50660118/

上一篇：javascript - 为什么此 javascript 代码会禁用来 self 的 Blogger 的安全连接(我认为是 SSL 证书)？

下一篇：css - 如何使用 Bootstrap 类在 Angular 5 的同一行中对齐 div

相关文章：

javascript - JS(document.getElementById ("example").textContent)不显示var中的内容

html - 对无法正常工作的图像使用媒体查询

html - 如何在桌面上扩展菜单宽度？

jquery - 导航栏切换器点击功能不起作用

javascript - 如何用GWT或HTML+CSS+JavaScript画对 Angular 线？

css - 在带圆 Angular 的 div 边框上使用渐变

javascript - 在 Javascript 中拆分字符串但保留分隔符/

javascript - 使用 jquery 将 select 与 radio 链接起来

html - 当人们说静态文件是 .html、.js 等时，他们是不是犯了一个错误？

javascript - 垂直对齐标题 APEXCHARTS

©2024 IT工具网  联系我们