CSS - 当链接悬停时更改另一个元素的样式？

ul>li>a:hover main {
  opacity: 0.1;
}

main p {
  font-size: 200px;
}

<header>
  <ul>
    <li><a href="#">Hover me</a></li>
  </ul>
</header>

<main>
  <p>Hello World!</p>
</main>

a:hover ul {
  opacity: 0.5;
}

<header>
  <ul>
    <li><a href="#">Hover me</a><span></span>
      <ul>
        <li>Child 1</li>
        <li>Child 2</li>
        <li>Child 3</li>
      </ul>
    </li>
  </ul>
</header>

a {
  border: 3px dotted blue;
  padding: 0 5px;
  color: #000;
  text-decoration: none;
  display: block;
}

a.aunt {
  border-color: red;
  margin: 10px 0;
}

a.aunt:hover+main p {
  opacity: 0.1;
  transition: 1s;
}

a.brother:hover+p {
  color: red;
}

a.sister:hover~p {
  color: blue;
}

main.mom {
  border: 5px dashed tomato;
}

main.mom p {
  opacity: 1;
  font-size: 50px;
  margin-top: 10px;
  transition: 1s;
  border: 3px solid red;
}

main.mom:hover p {
  font-size: 100px;
}

b {
  font-size: 25px
}

<a href='#/' class='aunt'>Aunt - Older sibling of an ancestor of the target</a>


<main class='mom'>
  <a href='#/' class='sister'>Big Sister - Sibling to target with <br>sibling combinator: <b>~</b></a><br><br>

  <a href='#/' class='brother'>Big Brother - Adjacent Sibling to target with <br>adjacent sibling combinator: <b>+</b></a>

  <p>Target</p>
  <a href='#/' class='brother'>Little Brother - Cannot influence target when hovered on.</a>
  <br> Mom - hovering over affects all descendants<br>(i.e. all siblings and siblings' and target's descendants)<br>
</main>

<a href='#/' class='aunt'>Aunt - This is after target's ancestor so it cannot influence target</a>