当将鼠标悬停在另一个元素（具有不同的父元素）上时，如何设置完全不同的元素？

Question

我知道如何在悬停在不同元素上时更改元素，但我想知道的是，我实际上可以更改元素的样式，该元素与hovered元素完全不同，而不是使用+或＆gt; ...等同样的兄弟姐妹和东西。例如，如果我有像这样的HTML结构

<div id="firstParent">

     <div id="firstParentInner">
         <a id="hoverMe">Hello world</a>
     </div>

</div>


<div id="randomDiv"></div>


<div id="changeMyInner">
      <div id="changeMyChild">
         <div id="changeMe"></div>
      </div>
</div>

我可以通过将hoverMe悬停在CSS

上来更改id changeMe的样式

所以CSS有点像

#firstParent #hoverMe:hover ~ #changeMyInner #changeMe{
     background: red;
}

由于

Answer 1

总之 - 没有。

有三种可能的情况：

直接在父母内部的元素：

#container:hover > .column { background-color: black; }

如果元素位于其他元素旁边：

.column:hover + .column { background-color: black; }

如果元素在父元素内的任何地方，那么：

#container:hover .element { background-color: black; }

就此而言。