是否有可能使div uncllick-throughable？

Question

在此示例中，可以单击蓝色框而不影响红色框而不使用js？

http://codepen.io/YikesItsMikes/pen/MaPBJy

HTML

<div id="boxone">
  <div id="boxtwo"></div>
</div>

CSS：

#boxone{
  width: 200px;
  height: 200px;
  background: red;
  margin: 50px auto;
  padding: 10px;
}
#boxtwo{
  width: 100px;
  height: 200px;
  background: blue;
  z-index: 999;
}

#boxone:active{
  background: yellow; 
}
#boxtwo:active{
  background: green;
}

Answer 1

对于#boxone包装#boxtwo的当前HTML不可能。

您可以对HTML进行分层，以便#boxtwo位于#boxone之上，而不会像这样嵌套; http://codepen.io/anon/pen/vNVaWV

.wrapper{
  width: 200px;
  margin: 50px auto;
  position: relative;
}

#boxone{
  width: 200px;
  height: 200px;
  background: red;
  position: relative;
  padding: 10px;
  display: inline-block;
}
#boxtwo{
  width: 100px;
  height: 200px;
  background: blue;
  z-index: 999;
  position: absolute;
  top: 10px;
  left: 10px;
}

#boxone:active{
  background: yellow; 
}
#boxtwo:active{
  background: green;
}

<div class="wrapper">
  <div id="boxone"></div>
  <div id="boxtwo"></div>
</div>