Change styling of another element

by Jens Kühn

HTML

<div>
  <main>
    <b>test</b>
    <button>
      hover?
    </button>
  </main>
  <section></section>
</div>

CSS

div {
  pointer-events: none;
}
div:hover section {
  background: green;
}
main {
  height: 100px;
  width: 100px;
  background: red;
}
button {
  pointer-events: auto;
}
section {
  height: 100px;
  width: 100px;
  background: blue;
}