示例代码:
<div id="container-1">
<div class="element-1"></div>
<div class="element-2"></div>
...
</div>
<div id="container-2">
<div class="element-3"></div>
<div class="element-4"></div>
...
</div>
当我将鼠标悬停在第一个容器中的元素上时,我正在尝试将悬停效果应用于位于第二个容器内的元素。两个元素必须位于不同的容器中。
我设法达到的最接近的是:
#container-1:hover ~ #container-2 .element-3
当我将鼠标悬停在第一个容器上时,此选择器允许我将悬停效果应用于.element-3,但是我希望只有当我将鼠标悬停在容器内的其中一个元素上时才能使用,而不是整个容器本身。
基本上,类似于以下内容:(可悲的是似乎没有工作)
#container-1 .element-1:hover ~ #container-2 .element-3
有没有什么办法可以用纯粹的CSS来完成这个?