选择相邻兄弟的孩子

Question

对于标记，例如：

<span class="location-title-container">
</span>

<div class="content-panel">
    <div class="floor-left-panel"></div>
    <div class="floor-right-panel"></div>
</div>

如何将鼠标悬停在.floor-left-panel上时选择.location-title-container？

Answer 1

您必须使用相邻的选择器才能在其后面获取元素。 你的选择器看起来像这样：

.location-title-container:hover + .content-panel .floor-left-panel { … }

仅为了您的信息，您不应在:hover标记上使用span。 默认情况下无法访问它们。您应该添加一些WAI ARIA角色标记。

Answer 2

.location-title-container:hover + .content-panel .floor-left-panel {}是您需要的选择器。

加号用于选择DOM中的下一个相邻元素。