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。

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

我更喜欢完全基于CSS的none 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>

单独的按钮：活动状态与父项分开：活动状态

1 个答案: