单独按钮:Active和parentDiv:活动

Question

我正试着在div内有一个按钮。当按钮被按下时，按钮的框影消失，当父-div被按下时，它的框影也会消失。

问题是，当我按下按钮时，父div的阴影也消失了，这不应该是

例如：

<div class="parent">
    <img>
    <h1></h1>
    <p></p>
    <button></button>
</div>

造型：

.parent {
    box-shadow: 0 2px 10px 0 @color;
   //some styling

    button {
        box-shadow: 0 2px 10px 0 @color;
    }

    button:active{
        box-shadow: none;
    }
}

.parent:active{
    box-shadow: none;
}

如何实现分离？我用的比较少，到目前为止我还试着改变z指数。

我想到的是，如果两个类都是活动的，是否有可能重新应用框影，但我不知道这是否可能，如果有，选择器看起来如何。

我更喜欢纯基于css的无js解决方案。

Answer 1

想法是使用另一个元素来创建阴影。它将是按钮的兄弟，您将不再有问题：

​

.parent {
  padding:20px;
  text-align:center;
  position:relative;
}
.parent .shadow  {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  box-shadow: 0 2px 10px 0 red;
}

button {
  box-shadow: 0 2px 10px 0 red;
  position:relative;
  z-index:2;
}

button:active {
  box-shadow: none;
}

.parent .shadow:active {
  box-shadow: none;
}

<div class="parent">
  <h1>a title</h1>
  <p>some text</p>
  <button>a button</button>
  <span class="shadow"></span>
</div>

​