更改锚点悬停时的DIV

Question

当我悬停文档中的任何锚链接时，我试图更改div。仅当它不在任何其他容器中时才起作用。

无论如何，是否可以在通常的页面布局（在body> divs内部）中进行这项工作？

#circle {
  position: fixed;
  border-radius: 50%;
  z-index: 5;
  height: 32px;
  width: 32px;
  background-color: #0081ff;
  pointer-events: none;
  transition:
    background .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
  transform: translate3d(0, 0, 0);
}
  
.circle:hover ~ #circle {
  background-color: transparent;
  box-shadow: 0 0 0 3px #E91E63;
  transform: scale(1) translate3d(0, 0, 0);
}
  

<div> <!--If you remove this DIV, it works-->
<a href="#" class="circle">Circle</a>
</div>

<div id="circle"></div>

Answer 1

#circle {
  position: fixed;
  border-radius: 50%;
  z-index: 5;
  height: 32px;
  width: 32px;
  background-color: #0081ff;
  pointer-events: none;
  transition:
    background .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
  transform: translate3d(0, 0, 0);
}
  
.circle:hover ~ #circle  {
  background-color: transparent;
  box-shadow: 0 0 0 3px #E91E63;
  transform: scale(1) translate3d(0, 0, 0);
}

<div  class="circle"> <!--If you remove this DIV, it works-->
<a href="#">Circle</a>
</div>

<div id="circle"></div>