输入标签无法使用鼠标进行聚焦

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（z-index元素.big-bubbles来解决此问题。 ：

.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

另一个解决方案是禁用bubble div的指针事件。

.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

每件事都在努力解决问题 的段

＆＃13;

＆＃13;

.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% 	{
  -webkit-transform: translateY(0);
  transform: translateY(0);
 }
 100%{
  -webkit-transform: translateY(-700px) rotate(600deg);
  transform: translateY(-700px) rotate(600deg);
 }
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;