将 button:active 与 parentDiv:Active 分开

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

我想到的是，如果两个类都处于活动状态，是否可以重新应用框阴影，但我不知道这是否可能以及选择器的外观如何。

我更喜欢 none 纯粹基于 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>

将 button:active 与 parentDiv:Active 分开

Separate button:active from parentDiv:Active

html

css

less