Html CSS只需要工具提示

我尝试过只使用CSS显示工具提示。我有一个解决办法；但是，我需要在HTML中使用另一个结构，并删除当前使用的包装器div

这是我当前使用的带有包装器的HTML，它使带有类工具提示的div出现：

<div class="wrapper">
  <img src="1.png"></img>
  <div class="tooltip">
    <span>1. A small tooltip.</span>
  </div>
</div>

下面是我描述问题的代码

---

如何使div

。工具提示在没有包装器div的情况下显示？
您可以使用除“的子对象”之外的其他选择器。如果希望在悬停时显示图像的同级，可以使用
+
选择器，如中所述

因此，您的HTML将如下所示，请注意img标记上的额外类

<div>
    <img class="sibling" src="1.png"></img>
    <div class="tooltip">
        <span>Lorem Ipsum</span>
    </div>
</div>

这将使带有class
工具提示的div在您悬停带有class
同级的图像时出现，但仅当它直接出现在它的后面时。如果您想在悬停任何图像时显示类
.tooltip
的所有同级，可以使用
img:hover+.tooltip
作为选择器。
@obsidian非常感谢。我需要一点澄清。我有很多限制。那么请大家做一下上面所需要的问题是什么？看了一下小提琴，它工作了，所以也不知道是什么问题is@johan它起作用了。问题是我不能使用相同的html结构。我只需要上面的结构。那么，你能告诉我这方面有什么变化吗code@qussama埃尔古伊：这是有效的。问题是我不能使用相同的html结构。我只需要上面的结构。你能告诉我代码有什么变化吗
<div>
    <img class="sibling" src="1.png"></img>
    <div class="tooltip">
        <span>Lorem Ipsum</span>
    </div>
</div>

.sibling:hover + .tooltip {
    display:block;
}
.tooltip{
    display: none;
}