Hover object, change main background

Question

Can't figure this one out for some reason. Here's a basic example. Need to change the main background when hovering on a deep div (in this case, p "1").

main {
  background: yellow;
}

.change:hover ~ main {
  background: blue;
}

<main>
  <div>
    <p class="change">
      1
    </p>
    <p>
      2 </p>
    <p>
      3 </p>
  </div>
</main>