通过CSS和数据字段的HTML5工具提示适用于链接，但不适用于图像 [英] HTML5 Tooltip via css and data- field works on link but not on image

问题描述

按照教程 http://ejohn.org/blog/html-5-数据属性/ 我想调整为图像（而非链接）创建工具提示的过程。因此，我将工具提示类规则调整为通用的，而不是特定于 a 标签的。

following the tutorial http://ejohn.org/blog/html-5-data-attributes/ I wanted to adapt the process of creating a tooltip for images (not links). So I adjusted the "tooltip" class rules to be generic and not a tag specific.

我重现了自己的努力在js-fiddle中 http://jsfiddle.net/AqPN8/

I reproduced my efforts in the js-fiddle http://jsfiddle.net/AqPN8/

在小提琴中可以看到，它确实适用于链接，但不适用于图像。您知道为什么不这样做吗？

As you can see in the fiddle it does work for links but not for images. Do you have any idea why not?

从技术上讲，我认为：hover 之类的东西也应该用于< img> ，而不仅仅是< a> 。

Technically I think that :hover and alikes should also for for <img> and not only <a>.

推荐答案

图像不允许使用伪元素，因此将：before 或：after < img> 上的$ c>将不起作用。

Images do not allow for pseudo elements, thus setting a :before or :after on an <img> will not work.

阅读更多信息：
CSS：未在某些元素上添加内容后

这篇关于通过CSS和数据字段的HTML5工具提示适用于链接，但不适用于图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！