css - :active for parent div class not working for child div

Question

我有一个由 divs 组成的按钮； .parent div 有子 div；一个 div 带有图标，另一个带有 span 用于文本。

<div class="parent" style="width:100px;height:100px;">
    <div class="child1" style="width:50px;height:50px;">
        <img src="#"/>
    </div>
    <div class="child2" style="width:20px;height:20px;">
        <span>hii</span>
    </div>
</div>


.parent:active{ background: red;}

这仅在我点击子 div 和父 div 内部时才有效。 但我需要整个区域。

这在 chrome 中工作正常，但在 IE 中不工作。 我需要一个同时适用于 Chrome 和 IE 的解决方案。

Answer 1

为什么不使用具有事件状态的实际按钮？

编辑: 我注意到您提到这在 IE 中不起作用，这是因为在 IE 中，可点击区域位于您放置在父 div 上的内容的后面，无论出于何种原因，老实说我不太了解；但我发现的修复包括为父 div 设置一个 ::before 和 ::after 伪类，具有以下属性:

.parent:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

button {
  width: 100px;
  height: 100px;
}

button:active {
  background-color: red;
}

.parent {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.parent:active {
  background-color: red;
  border: 1px solid #000;
}

.parent:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<button>
  <img src="#"/>
  <span>Text</span>
</button>

<div class="parent">
  <div class="child1" style="width:50px;height:50px;border:1px solid blue;">
    <img src="#" />
  </div>
  <div class="child2" style="width:20px;height:20px;border:1px solid green;">
    <span>hii</span>
  </div>
</div>