是否可以使 div 不可点击？

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

当前 HTML 不可能，其中 #boxone 包含 #boxtwo。

您可以将 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>

是否可以使 div 不可点击？

Is it possible to make a div unclick-throughable?

html

css

click