CSS - 使用〜到第一个标题设置第二个元素的内容

Question

我正在尝试使用CSS和极少量的JavaScript创建工具提示系统。到目前为止，我已经创建了一个如下结构：

<div class="tooltip" title="foo"></div>
<div class="tooltip" title="bar"></div>
<span id="tooltip-span"></span>

我创建了几个CSS样式，以便在悬停时显示工具提示范围，并且一些JavaScript会根据鼠标位置将工具提示移动到正确的位置。

但是，我在尝试使工具提示的内容与正在盘旋的div相对应时遇到了麻烦。我尝试使用以下CSS，但无济于事：

.tooltip:hover ~ #tooltip-span {
    display: inline;
    content: attr(title);
}

有没有办法让span元素使用CSS悬停div的标题内容？

感谢阅读！

Answer 1

使用纯CSS，没有。 content: attr(title)将内容设置为匹配的元素的title属性，在您的情况下为#tooltip-span。

要按照您想要的方式进行工作，您需要使用Javascript更新<span id="tooltip-span"></span>的title属性。