选择相邻兄弟的 child

Question

对于标记如：

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

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

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

Answer 1

您必须使用相邻的选择器来获取紧跟其后的元素。您的选择器将如下所示：

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

仅供参考，您不应在 span 标签上使用 :hover。默认情况下它们不可访问。您应该添加一些 WAI ARIA 角色标签。

Answer 2

.location-title-container:hover + .content-panel .floor-left-panel {}是select或者你需要的。

加号用于selectDOM中的下一个相邻元素。

选择相邻兄弟的 child

Selecting child of adjacent sibling

css

css-selectors

selector