懸停在使用位置的按鈕上不起作用：絕對？

我試着用z-index在着陸頁上的標題/按鈕的背景中放置一個圖像（因爲我使用的是背景顏色來創建疊加層），但是我無法讓它工作，直到我將標題/按鈕作爲絕對。現在這些按鈕（顯然需要點擊）不能被擱置或選擇。懸停在使用位置的按鈕上不起作用：絕對？

着陸頁被分成兩部分，我沒有將背景圖片放在下半部分，按鈕懸停很好，但在上半部分我留下了背景圖片，我無法將鼠標懸停在按鈕上。如果您找到解決方案，請解釋我是如何誤解的。

http://codepen.io/levane/pen/NNBOdM?editors=1100

<body> 
    <section id="landing-page"> 
     <nav> 
     <button id="contact">Contact</button> 
     </nav> 
     <div id="top-half"> 
     <header> 
      <h1>Artemis Levane</h1> 
      <h2>Web Designer & Front-End Developer</h2> 
      <button id="about-btn">Who I Am</button> 
     </header><img src="https://images.unsplash.com/photo-1442328166075-47fe7153c128?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;s=e18fcc3c0c7149c8ce315a176be812f0"/> 
    </div> 
    <div id="bottom-half"> 
    <header> 
     <h3>Helping businesses & individuals bring their brands to the web</h3> 
     <button id="work-btn">What I Do</button> 
    </header><img src="/Personal/Images/Logo.png"/><br/> 
    <div id="bounce"> 
     <button id="finger">☟</button> 
    </div> 
    </div> 
</section>

* { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    background: transparent; 
    font-family: Antonio; 
} 

#landing-page { 
    text-transform: uppercase; 
} 

nav { 
    width: 100%; 
    position: absolute; 
} 

button { 
    font-family: Antonio; 
    text-transform: uppercase; 
} 

#top-half { 
    height: 340px; 
    background: rgb(27, 40, 57); 
    color: rgb(240, 202, 0); 
    overflow: hidden; 
} 

#top-half header { 
    width: 50%; 
    height: 340px; 
    overflow: hidden; 
    margin-left: 25%; 
    margin-top: 5%; 
    text-align: center; 
    position: absolute; 
} 

#top-half img { 
    width: 100%; 
    opacity: 0.1; 
} 

#landing-page header h1 { 
    font-weight: 100; 
    font-size: 500%; 
    letter-spacing: 5px; 
} 

#landing-page header h2 { 
    font-size: 23; 
    font-weight: 400; 
    letter-spacing: 3px; 
    opacity: 0.7; 
} 

#about-btn { 
    border: 5px solid rgb(240, 202, 0); 
    padding: 5px 40px; 
    color: rgb(240, 202, 0); 
    letter-spacing: 4px; 
    margin-top: 5%; 
} 

#about-btn:hover { 
    color: rgb(27, 40, 57); 
    background: rgb(240, 202, 0); 
} 

#contact { 
    padding: 5px 40px; 
    color: rgb(240, 202, 0); 
    border: 3.5px solid rgb(240, 202, 0); 
    border-radius: 25px; 
    font-weight: 100; 
    letter-spacing: 3px; 
    text-align: center; 
    font-size: 15px; 
    margin-left: 87%; 
    margin-top: 1.1%; 
} 

#contact:hover { 
    color: rgb(27, 40, 57); 
    background: rgb(240, 202, 0); 
} 

#bottom-half { 
    height: 340px; 
    background-color: rgb(255, 246, 222); 
    color: rgb(27, 40, 57); 
} 

#bottom-half header { 
    position: absolute; 
    width: 60%; 
    margin-left: 24.8%; 
    margin-top: 7%; 
} 

#bottom-half header h3 { 
    font-size: 50px; 
    font-weight: 100; 
    letter-spacing: 3px; 
} 

#bottom-half img { 
    height: 87%; 
    margin-left: 470.5px; 
    margin-top: 2.5%; 
    opacity: .1; 
} 

#work-btn { 
    border: 5px solid rgb(27, 40, 57); 
    padding: 5px 40px; 
    color: rgb(27, 40, 57); 
    letter-spacing: 4px; 
    margin-left: 29.7%; 
    margin-top: 3%; 
    font-weight: 400; 
} 

#work-btn:hover { 
    color: rgb(255, 246, 222); 
    background: rgb(27, 40, 57); 
} 

/* ☟ FINGER BOUNCE ☟ */ 

@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
    -moz-transform: translateY(0); 
    -ms-transform: translateY(0); 
    -webkit-transform: translateY(0); 
    transform: translateY(0); 
    } 
    40% { 
    -moz-transform: translateY(-20px); 
    -ms-transform: translateY(-20px); 
    -webkit-transform: translateY(-20px); 
    transform: translateY(-20px); 
    } 
    60% { 
    -moz-transform: translateY(-15px); 
    -ms-transform: translateY(-15px); 
    -webkit-transform: translateY(-15px); 
    transform: translateY(-15px); 
    } 
} 

#finger { 
    margin-top: -10%; 
    font-size: 35px; 
} 

#bounce { 
    -moz-animation: bounce 4s infinite; 
    -webkit-animation: bounce 4s infinite; 
    animation: bounce 4s infinite; 
} 


/* END FINGER BOUNCE */

來源

2016-04-23 Art

您可以通過設置較高的z-index值增加堆疊順序。

nav { 
    ... 
    position: absolute; 
    z-index: 1; 
} 
#top-half header { 
    ... 
    position: absolute; 
    z-index: 1; 
}

Updated Pen

來源

2016-04-23 16:01:17 Stickers

懸停在使用位置的按鈕上不起作用：絕對？

回答

相關問題