css - 通过 css 和数据字段的 HTML5 工具提示适用于链接但不适用于图像

Question

按照教程http://ejohn.org/blog/html-5-data-attributes/我想调整为图像（不是链接）创建工具提示的过程。所以我将“工具提示”类规则调整为通用而不是a特定于标签。

正如您在小提琴中看到的那样，它确实适用于链接，但不适用于图像。你知道为什么不吗？

从技术上讲，我认为:hoverand likes 也应该 for<img>和 not only <a>。

score 5 · Accepted Answer

您不能::before/::after在不能有子标签的标签上使用伪元素，<img>例如<br>，、、、<hr>等：MDN 文档:before

:before创建一个伪元素，它是匹配元素的第一个子元素。

score 3 · Accepted Answer

::before创建一个伪元素，它是匹配元素的第一个子元素。

<img>element 是一个空标签而不是容器标签，你不能在::before 像<img>.

作为替代方案，您可以通过内联包装器元素包装图像，例如<span>：

<span class="tooltip" data-tip="show a tooltip for image">
    <img alt="show a tooltip for image" src="path/to/image" />
</span>

score 2 · Accepted Answer

图像不允许使用伪元素，因此在 an 上设置 a:before或将不起作用。:after<img>

3 回答 3