輸入標籤無法使用鼠標進行對焦

Question

我正在添加一些背景樣式，問題是我無法選擇輸入標籤，使用鼠標按鈕，因此問題在添加樣式後開始。

這裏是我的代碼：Input tags not working

<div class="bla"> 

    <div class="test-continer"> 
    <span>Problem: Input tags, Buttons and link tags are <b>not working</b></span> 
    <h4>when "test-continer" div , h4 (header) and above span is removed its working!</h4> 
    <input id = "input" type="text"> 
    <button id = "button" onClick = "check()" >Submit</button> 
    <a href="http://codepen.io/dannibla" class= "article"><strong>What makes this problem ?</strong></a> 
    </div> 

</div> 

當<div class="test-continer">，<h4>和<span>被拆除，則<input>工作正常，我很困惑？

Answer 1

您的.big-bubbles元素正在出現在您的.test-continer表單的頂部上。這意味着您要點擊.big-bubbles元素，而不是在表單控件中。

您可以通過給你的.test-continer元素的相對位置，解決這一問題及z-index大於1（這是你的.big-bubbles元素的z-index：

.test-continer { 
    position: relative; 
    z-index: 2; 
} 

Modified Codepen demo

Answer 2

這是因爲你的泡沫DIV它覆蓋在那上面，它有position: absolute和z-index，所以它覆蓋到你的大腦上。所以，你需要修復.test-continer DIV position: absolute or relative與z-index更多然後1

.test-continer { 
    position: absolute; 
    z-index: 2; 
} 

Answer 3

另一種解決方案是禁用指標事件氣泡格。

.bg-bubbles { 
    z-index: 1; 
    pointer-events: none; 
} 

Answer 4

將bg-bubbles類的位置屬性從絕對變爲相對。

.bg-bubbles { 
    position: relative; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
} 

Answer 5

每一件事情正在什麼問題
片段

.bla { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin-top: 0px; 
 
    overflow: hidden; 
 
    background: #4d4d4d; 
 
    background: -webkit-linear-gradient(top left, #4d4d4d 0%, #999999 100%); 
 
    background: linear-gradient(to bottom right, #4d4d4d 0%, #999999 100%); 
 
} 
 

 
.bg-bubbles { 
 
position: absolute; 
 
top: 0; 
 
left: 0; 
 
width: 100%; 
 
height: 100%; 
 
z-index: 1; 
 
} 
 

 
.bg-bubbles li { 
 
position: absolute; 
 
list-style: none; 
 
display: block; 
 
width: 40px; 
 
height: 40px; 
 
background-color: rgba(255, 255, 255, 0.15); 
 
bottom: -160px; 
 
-webkit-animation: square 25s infinite; 
 
animation: square 25s infinite; 
 
-webkit-transition-timing-function: linear; 
 
transition-timing-function: linear; 
 
} 
 

 
.bg-bubbles li:nth-child(1) { 
 
    left: 10%; 
 
} 
 

 
.bg-bubbles li:nth-child(2) { 
 
left: 20%; 
 
width: 80px; 
 
height: 80px; 
 
-webkit-animation-delay: 2s; 
 
animation-delay: 2s; 
 
-webkit-animation-duration: 17s; 
 
animation-duration: 17s; 
 
} 
 

 
.bg-bubbles li:nth-child(3) { 
 
left: 25%; 
 
-webkit-animation-delay: 4s; 
 
animation-delay: 4s; 
 
} 
 

 
.bg-bubbles li:nth-child(4) { 
 
left: 40%; 
 
width: 60px; 
 
height: 60px; 
 
-webkit-animation-duration: 22s; 
 
animation-duration: 22s; 
 
background-color: rgba(255, 255, 255, 0.25); 
 
} 
 

 
.bg-bubbles li:nth-child(5) { 
 
left: 70%; 
 
} 
 

 
.bg-bubbles li:nth-child(6) { 
 
left: 80%; 
 
width: 120px; 
 
height: 120px; 
 
    -webkit-animation-delay: 3s; 
 
animation-delay: 3s; 
 
background-color: rgba(255, 255, 255, 0.2); 
 
} 
 

 
.bg-bubbles li:nth-child(7) { 
 
left: 32%; 
 
    width: 160px; 
 
height: 160px; 
 
-webkit-animation-delay: 7s; 
 
animation-delay: 7s; 
 
} 
 

 
.bg-bubbles li:nth-child(8) { 
 
left: 55%; 
 
width: 20px; 
 
height: 20px; 
 
-webkit-animation-delay: 15s; 
 
animation-delay: 15s; 
 
-webkit-animation-duration: 40s; 
 
animation-duration: 40s; 
 
} 
 

 
.bg-bubbles li:nth-child(9) { 
 
left: 25%; 
 
width: 10px; 
 
height: 10px; 
 
-webkit-animation-delay: 2s; 
 
animation-delay: 2s; 
 
-webkit-animation-duration: 40s; 
 
animation-duration: 40s; 
 
background-color: rgba(255, 255, 255, 0.3); 
 
} 
 

 
.bg-bubbles li:nth-child(10) { 
 
left: 90%; 
 
width: 160px; 
 
height: 160px; 
 
-webkit-animation-delay: 11s; 
 
animation-delay: 11s; 
 
} 
 

 
@-webkit-keyframes square { 
 
0% \t { 
 
    -webkit-transform: translateY(0); 
 
    transform: translateY(0); 
 
} 
 
100%{ 
 
    -webkit-transform: translateY(-700px) rotate(600deg); 
 
    transform: translateY(-700px) rotate(600deg); 
 
} 
 
} 
 

 
@keyframes square { 
 
0% \t { 
 
    -webkit-transform: translateY(0); 
 
    transform: translateY(0); 
 
} 
 
100%{ 
 
    -webkit-transform: translateY(-700px) rotate(600deg); 
 
    transform: translateY(-700px) rotate(600deg); 
 
} 
 
}

<div class="bla"> 
 
    <div class="test-continer"> 
 
    <span>Problem: Input tags, Buttons and link tags are <b>not working</b></span> 
 
    <h4>when "test-continer" div , h4 (header) and above span is removed its working!</h4> 
 
    <input id = "input" type="text"> 
 
    <button id = "button" onClick = "check()" >Submit</button> 
 
    <a href="http://codepen.io/dannibla" class= "article"><strong>What makes this problem ?</strong></a> 
 
    </div> 
 
</div>