HTML5工具提示通過CSS和數據字段在鏈接上工作，但不在圖像上

遵循教程http://ejohn.org/blog/html-5-data-attributes/我想調整爲圖像（而不是鏈接）創建工具提示的過程。所以我調整了「工具提示」類規則是通用的，而不是a標籤特定的。HTML5工具提示通過CSS和數據字段在鏈接上工作，但不在圖像上

我轉載我在JS-小提琴http://jsfiddle.net/AqPN8/

努力，你可以在它的工作的鏈接而不是圖像的小提琴看到。你有什麼想法爲什麼不呢？

技術上我認爲:hover和類似的系統也應該爲<img>不僅<a>。

2013-08-26 wirrbel

圖像不允許出現僞元素，因此在<img>上設置:before或:after將不起作用。

2013-08-26 11:33:09 robooneus

不能使用對不能生育的標籤，即::before/::after僞元素，<img>，<br>，<hr>等：MDN Documentation for :before

:before創建了一個僞元素是的第一個孩子元素匹配。

2013-08-26 11:32:45

::before創建僞元素是相匹配的元件的第一個子。

<img>元素是空標籤不是容器標籤，你不能像<img>元素使用::beforepseudo-element。

作爲替代方案，可以像<span>通過在線包裝元素包住圖像：

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

2013-08-26 11:33:06

回答