20

content 属性を長い間使用してきましたが、今日は何か新しいことを試してみたいと思いました。JS を使用して画像のツールチップを表示する代わりに、CSS を使用して動的に表示できるかどうかを知りたかったのです。

だから私は試しました：

.TableLine:hover:after{
  content: url("../Img/Photo/"attr(id)".jpg"); 
}

whereattr(id)は、写真の名前でもある写真の ID (英数字) を返すことになっています。

全く効かない、効果がない。ブロックに境界線や背景を追加しても効果がないように見えるため、ブロックが解析されなかったと思います。

attr(id)URLを使わずに単独で使用すると、完全に機能します。attr(id)写真の実名に置き換えても機能します。

ウェブ上でしばらく検索した後、関連するものが見つからなかったので、ここにいます。それは既知のバグですか、それとも私の間違いですか？:)

4

2 に答える 2

19

バグでも間違いでもありません。現在サポートされているコンテンツの構文 (CSS2.1) は次のとおりです。

content: normal | none | 
         [ <string> | <uri> | <counter> | attr() |
           open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

すなわち:

  • リテラルnormal、noneまたはinherit

  • またはこれらの連続した任意の数:

    • 文字列 -"hello"
    • (定数) URI -url("image.jpg")
    • カウンター -counter(section)
    • 属性 -attr(id)
    • open-quote、close-quote、no-open-quote、no-close-quote

仕様では、それらを「ネスト」することは許可されていません。相互にのみ従うことができます。たとえば、次のようになります。

content: "Photo: " url("../Img/Photo.jpg") attr(id);
/* Which is not what you want */

現在の CSS3 ドラフトでも許可されていません。おそらく、議論されていれば、ほとんどのユースケースはプレゼンテーションとはほとんど関係がなく、実際のコンテンツと関係があるためです.

于 2012-02-11T22:46:08.053 に答える
14

2012年8月28日のW3C候補勧告の時点で、attr（）によって返されるタイプを指定するための構文があります。

ここで説明します。

簡単に言えば、次のように機能します。

content: attr(id url);

しかし、それでも他の文字列と連結できるとは思えないので、面倒です。

とにかく、これはまだどこにも実装されていないようです。

ブラウザの互換性を確認する

于 2013-02-22T05:03:01.573 に答える