Hover（邊距，z-index）按鈕錯誤

Question

我正在構建一個頁面，這里有一個小錯誤。我無法單擊按鈕上的 hover（div 中的按鈕使用 class btn 滑動）。我認為問題出在 z-index 或某些元素的邊距中。 但我不知道如何解決。

這是一個頁面： http://project.gmwebs.cz/ 。

 * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Cabin', sans-serif; } body { background: url(img/background.jpg); } a { text-decoration: none; color: rgb(121, 0, 0); } h2 { color: #F2F2F2; } /* Menu */.kolecko{ width: 200px; height: 100px; background-color: #F2F2F2; border-bottom-right-radius: 100px; border-bottom-left-radius: 100px; border: 10px solid rgb(121, 0, 0); border-top: 0; z-index: 3; position: absolute; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-top: 40px; }.logo { width: 160px; z-index: 4; position: absolute; }.menu-container { display: flex; justify-content: center; align-items: center; position: relative; } nav { height: 90px; background-color: #F2F2F2; border-bottom: 10px solid rgb(121, 0, 0); display: flex; flex-direction: column; align-content: center; justify-content: center; } nav ul { display: flex; flex-direction: row; align-content: center; justify-content: center; margin: 0 100px; } nav ul li{ list-style-type: none; padding: 0 20px; text-transform: uppercase; color: rgb(121, 0, 0); font-size: 1.5rem; } nav ul li a:hover { color: #000; }.toggle { width: 100%; padding: 15px 20px; background: rgb(121, 0, 0); text-align: right; box-sizing: border-box; color: #fff; font-size: 2rem; display: none; }.ul-list { display: flex; align-content: center; justify-content: center; flex-direction: row; } #link-menu { margin-right: 10%; } #phone { margin-left: 10%; } nav.ul-list.social-btn li:nth-child(1) { padding-right: 0px; } nav.ul-list.social-btn li:nth-child(2) { padding-left: 7px; }.social-btn { display: flex; justify-content: center; align-content: center; flex-direction: row; } i.fab.fa-facebook-square { color: #3b5992; } i.fab.fa-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); -webkit-background-clip: text; /* Also define standard property for compatibility */ background-clip: text; -webkit-text-fill-color: transparent; } /* Slider */.slider { display: block; height: 100%; width: 100%; z-index: -1; background-color: #1f1f1f; overflow: hidden; position: absolute; top: 0px; right: 0px; border-bottom: 10px solid rgb(121, 0, 0); }.slider > * { position: absolute; display: block; width: 100%; height: 100%; background-color: #1f1f1f; animation: slide 12s infinite; overflow: hidden; }.slide:nth-child(1) { left: 0%; animation-delay: -1s; background-image: url(img/slide1.jpg); background-size: cover; background-position: center; }.slide:nth-child(2) { left: 100%; animation-delay: 3s; background-image: url(img/slide2.png); background-size: cover; background-position: center; }.slide:nth-child(3) { left: 100%; animation-delay: 7s; background-image: url(img/slide3.jpg); background-size: cover; background-position: center; }.slide p { font-size: 2rem; text-align: center; display: inline-block; width: 100%; margin-top: 350px; color: rgb(121, 0, 0); background: 0% 0% no-repeat padding-box; opacity: 0.84; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); padding-top: 20px; z-index: 4; }.slide p span { font-size: 1.5rem; color: #000; }.btn { background-color:transparent; border:3px solid rgb(121, 0, 0);; display:inline-block; cursor:pointer; color:rgb(121, 0, 0); font-size: 1.5rem; padding:5px 30px; text-decoration:none; margin: 20px 0; }.btn:hover { background-color:transparent; color: #000; border:3px solid #000; }.btn:active { position:relative; top:1px; } @keyframes slide { 0% { left: 100%; width: 100%; opacity: 1;} 6.667% { left: 0%;} 33.334% { left: 0%;} 40% { left: -100%; width: 100%; opacity: 1;} 40.0001% { left: -100%; width: 0%; opacity: 0;} 100% { left: 100%; width: 0%; opacity: 1;} } /* Prolog */.prolog { text-align: center; color: #F2F2F2; margin: 10%; margin-bottom: 5%; font-size: 1.2rem; margin-top: 102.5vh; }.prolog p { margin-top: 1rem; } /* Newslatters */.newslatters { display: flex; align-content: center; justify-content: center; flex-direction: column; text-align: center; color: #F2F2F2; }.newslatters form { display: flex; flex-direction: column; justify-content: center; align-content: center; text-align: center; margin: 1% 35%; margin-top: 0%; color: #F2F2F2; }.newslatters p { margin: 0.5% 0%; font-size: 1.2rem; }.newslatters h2 { font-size: 1.8rem; }.newslatters form input.email { margin: 1% 0; padding: 2% 0%; text-align: center; font-size: 1rem; background-color: #F2F2F2; }.newslatters form input.email:active { border: 3px solid #000; }.newslatters form input.submit { margin: 1% 25%; margin-top: 5%; border: 3px solid rgb(121, 0, 0); padding: 1.3% 0%; text-align: center; font-weight: bold; background-color: #F2F2F2; font-size: 1rem; box-shadow: 5px 10px transparent; }.newslatters form input:hover { border: 3px solid #000; } /* Footer */ footer { border-top: 5px solid rgb(121, 0, 0); margin-top: 2%; } footer.author { padding: 0.8% 0; text-align: center; color: #F2F2F2; } footer.author a{ font-weight: bold; color: #F2F2F2; } footer.author a:hover{ color: rgb(121, 0, 0); } i.fas.fa-heart { color: rgb(121, 0, 0); } /* Media Query */ @media (max-width: 1440px) { nav ul li{ font-size: 1.3rem; } nav ul { margin: 0 50px; } } @media (max-width: 1024px) { nav ul { margin: 0 10px; } nav ul li{ font-size: 1rem; } footer.author { padding: 1.5% 0; text-align: center; color: #F2F2F2; } } @media (max-width: 1023px) {.toggle { display: block; }.kolecko { display: none; }.active { display: block; }.ul-list { display: flex; align-content: center; justify-content: center; flex-direction: column; margin-top: 0px; padding-top: 0px; } #link-menu { margin-right: 0%; height: 280px; padding-bottom: 0px; } #phone { margin-left: 0%; } #phone li:nth-child(2) { border-bottom: none; padding-top: 20px; } #phone.social-btn li:nth-child(1) { border-bottom: none; padding-right: 7px; } #phone.social-btn li:nth-child(2){ border-bottom: none; padding-top: 0px; }.social-btn { display: flex; justify-content: center; align-content: center; flex-direction: row; }.logo { z-index: 1; position: absolute; top: -400px; } nav { height: auto; background-color: #F2F2F2; border-bottom: 10px solid rgb(121, 0, 0); z-index:1; display: none; flex-direction: column; align-content: flex-end; justify-content: flex-end; align-items: center; } nav ul { display: flex; flex-direction: column; align-content: flex-end; justify-content: flex-end; text-align: center; margin: 0px 0px; z-index: 1; padding-bottom: 20px; } nav ul li{ list-style-type: none; padding: 0px 0px; text-transform: uppercase; color: rgb(121, 0, 0); font-size: 1.5rem; line-height: 1.4; border-bottom: 1px #000 solid; } nav ul li:nth-child(2) { margin-right: 0%; } nav ul li:nth-child(3) { margin-left: 0%; }.slide p { margin-top: 250px; }.prolog { font-size: 1rem; }.newslatters form { margin: 1% 20%; font-size: 1rem; }.newslatters p { font-size: 1rem; }.newslatters form input.submit { padding: 1.3% 2%; } }

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q" crossorigin="anonymous"> <div class="toggle"> <i class="fa fa-bars menu" aria-hidden="true"></i> </div> <nav> <div class="ul-list"> <ul id="link-menu"> <li><a href="#" class="menu-link1"><i class="fas fa-home"></i> Domů</a></li> <li><a href="#" class="menu-link2"><i class="fas fa-car"></i> Pronájem</a></li> <li><a href="#" class="menu-link3"><i class="fas fa-dollar-sign"></i> Prodej</a></li> </ul> <ul id="phone"> <li><a href="#" class="menu-link4"><i class="fas fa-mobile-alt"></i> Kontakt</a></li> <li><i class="fas fa-phone-square-alt"></i> +420 123456789</li> <div class="social-btn"> <li><a href="#"><i class="fab fa-facebook-square"></i></a></li> <li><a href="#"><i class="fab fa-instagram"></i></a></li> </div> </ul> </div> </nav> <div class="menu-container"> <div class="kolecko"> </div> <img src="css/img/logo.png" class="logo"> </div> <div class="container"> <div class="slider"> <div class="slide"> <p>MB A35 AMG 2019 AeroPacket <br><span>Můžeš mě mít již od 4999 Kč</span><br><a href="#" class="btn">Pronajmout</a></p> </div> <div class="slide"> <p>Audi A7 V6T 2017 <br><span>Můžeš mě mít již od 4999 Kč</span><br><a href="#" class="btn">Pronajmout</a></p> </div> <div class="slide"> <p>Audi A3 2017 <br><span>Můžeš mě mít již od 4999 Kč</span><br><a href="#" class="btn">Pronajmout</a></p> </div> </div> <div class="prolog"> <h1>Overcars s.r.o. - Půjčovna a prodejna luxusních automobilů</h1> <p>Jsme malá začínající firma se zaměřením na pronájem a prodej vozů. Půjčujeme od levných vozů až po vozy luxusní. Naše vozy jsou s pravidelným servisem a ve 100% stavu. Řídíme se motem náš zákazník náš pán. Dokážeme zprostředkovat pronájem i prodej vozidel na míru,</p> </div> <div class="newslatters"> <h2>Chceš vědět? co se u nás děje:</h2> <p>Přihlaš se k odběru novinek.</p> <form action="#"> <input type="email" placeholder="Email" class="email"> <input type="submit" value="Odebírat" class="submit"> </form> </div> </div> <footer> <div class="author"> <p>Build with <i class="fas fa-heart"></i> by <a href="https://gmwebs.cz/">GMWebs</a></p> </div> </footer>

有人可以幫我嗎？

提前感謝您的建議！

Answer 1

這絕對是z-index的問題。

您可以簡單地將這個 CSS 添加到您的nav ：

position: relative;
z-index: 1;

並從.slider元素中刪除z-index: -1 。