Css Content, Attr и Url в том же предложении

Question

Я использовал атрибут контента в течение длительного времени, и сегодня я хотел попробовать что-то новое. Вместо того, чтобы использовать JS для отображения всплывающей подсказки с изображением, я хотел знать, можно ли это сделать динамически с помощью CSS.

Так что я пробовал:

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

где attr(id) должен возвращать идентификатор изображения (буквенно-цифровой), который является также названием картины.

Это совсем не работает, оно не имеет никакого эффекта. Я думаю, что блок не анализировался, потому что добавление границы или фона в блок также не имеет никакого эффекта.

Когда я просто использую только attr(id), без элемента url, он отлично работает. Он также работает, когда я заменяю attr(id) реальным именем картинки.

После поиска в Интернете я не нашел ничего подходящего, поэтому я здесь. Это известная ошибка или просто моя ошибка? :)

Answer 1

Это не ошибка и не ошибка. В настоящее время поддерживается синтаксис (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 не позволяют это либо. Возможно, если это обсуждается, потому что большинство случаев использования мало что связано с презентацией и больше связано с фактическим контентом.

Answer 2

С рекомендацией кандидата W3C от 28 августа 2012 года существует синтаксис для указания типа, возвращаемого attr().

Описывается here.

Короче говоря, следующий будет работать:

content: attr(id url); 

Но это еще не кажется, что вы могли бы объединить, что с другими строками, что раздражает.

Во всяком случае, это по-прежнему не реализуется нигде.

Проверить Browser compatibility