Question

我有一个由*组成的按钮； divs div有子div；一个带有图标的.parent和另一个带有div的文本。

span

仅当我在子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>

：对父div类有效，对子div不起作用

1 个答案: