css - 如何使用悬停选择器显示 "uncle"元素

Question

在这个 fiddle 中:http://jsfiddle.net/d8582tg2/ ，我正在尝试使用悬停选择器来显示工具提示，但无法正常工作。

<div id="typeahead-box">
    <div class="ic-tokens">
        <div class="ic-token">Hover over</div>
    </div>
    <div>
        <div id="tooltip">Should show</div>
    </div>
</div>

如何引用二级 div 以便显示工具提示 div？

Answer 1

组合器 ~ 和 + 仅适用于兄弟元素。

因此它不起作用，因为 .ic-token 不是 div 元素的同级元素。由于您无法在 CSS 中选择父元素，因此目前无法做到这一点。

最接近的是:

Updated Example

#typeahead-box:hover .ic-tokens + div #tooltip {
  display: block
}