仅限CSS工具提示需要

Question

我试图仅使用CSS显示工具提示。我有一个解决方案;但是我需要在HTML中使用另一个结构，并删除当前使用的包装器div。

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

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

以下css显示了工具提示：

.wrapper:hover > .tooltip {
  display:block;
}

这是我描述问题的代码; http://jsfiddle.net/5p3teu5b/15/

如何在没有包装div的情况下显示div .tooltip？

Answer 1

您可以使用＆＃34;，see the fiddle for an example的孩子以外的其他选择器。如果您希望在悬停时显示图像的同级，则可以使用W3 Selectors中描述的+选择器。

所以你的HTML看起来像这样，注意img标签上的额外类。

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

使用以下css

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

当您使用类tooltip悬停图像时，这会使带有sibling类的div出现，但前提是它直接出现在它之后。如果您希望在悬停任何图片时显示所有同级.tooltip的兄弟姐妹，则可以使用img:hover + .tooltip作为选择器。