CSS內容，和的Attr網址在同一個句子

我已經使用了內容屬性很長一段時間了，今天我想嘗試一些新的東西。我不想使用JS來顯示圖像工具提示，而是想知道是否可以使用CSS動態執行它。CSS內容，和的Attr網址在同一個句子

所以，我想：

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

其中attr(id)應該返回圖片（字母）的ID，這也是圖片的名稱。

它不會在所有的工作，它沒有任何效果。我認爲這個塊沒有解析，因爲向塊添加邊框或背景似乎也沒有效果。

當我只是用attr(id)獨自一人，沒有網址的東西，它完美的作品。當我將attr(id)替換爲圖片的真實名稱時，它也可以使用。

在網絡上搜索了一陣後，我還沒有發現相關的所以我在這裏什麼。這是一個已知的錯誤還是我的錯誤？ :)

來源

2012-02-11 h1fra

我想'ATTR（ID）'只是工程上的字符串不是'url'。 – elclanrs 2012-02-11 21:38:26

這確實是我的問題的關鍵，可以肯定的是>< – h1fra 2012-02-11 21:50:35

它既不是一個錯誤，也不是一個錯誤。內容目前支持的語法（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

specs不允許他們爲「嵌套」，他們只能跟隨彼此，例如：

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

當前的CSS3草案也不允許它。可能 - 如果已經討論過 - 因爲大多數使用案例與演示無關，而更多與實際內容有關。

來源

2012-02-11 22:46:08 JimmiTh

好吧，這是解釋一切：/ 有點恥辱，它不在討論中，可能是令人敬畏的取代JS與CSS的那種事情！謝謝:) – h1fra 2012-02-12 00:47:40

從W3C候選人建議書2012年8月28日起，有用於指定attr（）返回的類型的語法。

據描述here。

長話短說，下面的工作：

content: attr(id url);

但它仍然似乎並不像你將能夠串連與其他字符串，這是煩人。無論如何，這似乎仍然沒有在任何地方實施。

檢查Browser compatibility

來源

2013-02-22 05:03:01

attr基本上是css世界的紅頭髮的繼子女。它有這麼大的能力，但沒有人會允許它這樣做。 :( – 2013-09-10 18:49:58

CSS內容，和的Attr網址在同一個句子

回答

相關問題