1

チュートリアルhttp://ejohn.org/blog/html-5-data-attributes/に従って、画像 (リンクではなく) のツールチップを作成するプロセスを調整したいと考えました。そこで、「ツールチップ」クラスのルールを、aタグ固有ではなく、一般的なものに調整しました。

js-fiddle http://jsfiddle.net/AqPN8/で自分の努力を再現しました

フィドルでわかるように、リンクでは機能しますが、画像では機能しません。なぜそうしないのか、何か考えがありますか？

技術的には、 and alikes は forだけでなく:hoverfor もすべきだと思います。<img><a>

4

3 に答える 3

5

::before/::after子を持つことができないタグ、つまり 、 、 などで疑似要素を使用<img>することはできません: MDN Documentation for<br><hr>:before

:before一致した要素の最初の子である疑似要素を作成します。

于 2013-08-26T11:32:45.517 に答える
3

::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>

JSFiddle デモ。

于 2013-08-26T11:33:06.250 に答える
2

画像では疑似要素を使用できないため、 a:beforeまたは:afteronを設定しても機能し<img>ません。

詳細については、次を参照してください: CSS : 特定の要素にコンテンツを追加しなかった後

于 2013-08-26T11:33:09.100 に答える