[CSS][HTML]blokowanie wybranego obszaru <a> Opcje

[stellatus]

https://codepen.io/reti/pen/ExVZQKO

Kod

  <div class="div1">
    <a href="https://www.flaticon.com">
      <div class="div2">
        <div class="div3">
        </div>
      </div>
    </a>
  </div>

Kod

.div1 {
  background-color: green;
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.div2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  width: 200px;
  height: 200px;
}

.div3 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("https://www.freuciv.com/wp-content/uploads/2020/04/cinema.png")
    0 0 no-repeat;
  background-size: auto;
  width: 50px;
  height: 50px;
}

Jak najprościej wyłączyć .div3 spoza zasięgu <a>? Innymi słowy: jak to zrobić, żeby nie można było z .div3 otworzyć hiperłącza?

Ten post edytował stellatus 23.04.2020, 11:50:28

[trueblue]

https://developer.mozilla.org/en-US/docs/We.../pointer-events

A dlaczego element w środku nie będzie aktywny?