CSS Content、Attr 和 Url 在同一个句子中

发布于 2025-01-04 16:08:21 字数 485 浏览 0 评论 0原文

我已经使用 content 属性很长时间了，今天我想尝试一些新的东西。我想知道是否可以使用 CSS 动态地显示图像工具提示，而不是使用 JS 来显示图像工具提示。

所以我尝试了：

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

其中 attr(id) 应该返回图片的 ID（字母数字），这也是图片的名称。

根本没有作用，没有任何效果。我认为该块没有解析，因为向块添加边框或背景似乎也没有效果。

当我只使用 attr(id) 而不使用 url 时，它工作得很好。当我将 attr(id) 替换为图片的真实名称时，它也有效。

在网上搜索了一段时间后，我没有找到任何相关的内容，所以我在这里。这是一个已知的错误还是只是我的错误？ :)

原文

I have used the content attribute for a long time, and today I wanted to try something new. Instead of using JS to display a image tooltip I wanted to know if it was possible to do it dynamically with CSS.

So I tried:

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

where attr(id) is supposed to return the ID of the picture (alphanumeric) which is also the name of the picture.

It doesn't work at all, it has no effect. I think that the block did not parse because adding a border or background to the block also seems to have no effect.

When I just use the attr(id) alone, without the url thing, it works perfectly. It also works when I replace attr(id) with the real name of the picture.

After searching a while on the web I haven't found anything relevant so here I am. Is that a known bug or just my mistake? :)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空气里的味道 2025-01-11 16:08:21

这既不是错误也不是错误。当前支持的内容语法（CSS2.1）是：

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

即：

文字正常，无或继承
或任意数量的这些连续：
字符串 - “hello”
（常量）URI - url("image.jpg")
计数器 - 计数器（部分）
属性 - attr(id)
开引号、闭引号、无开引号、无闭引号

specs 不允许它们“嵌套”，它们只能相互跟随，例如：

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

当前的 CSS3 草案也不允许。可能 - 如果已经讨论过 - 因为大多数用例与演示关系不大，而与实际内容关系更大。

It's neither a bug nor a mistake. The currently supported syntax (CSS2.1) for content is:

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

I.e.:

The literal normal, none or inherit
Or any number of these in succession:
- a string - "hello"
- a (constant) URI - url("image.jpg")
- a counter - counter(section)
- an attribute - attr(id)
- open-quote, close-quote, no-open-quote, no-close-quote

The specs don't allow for them to be "nested", they can only follow each other, e.g.:

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

The current CSS3 drafts don't allow for it either. Possibly - if it's been discussed - because most use cases would have little to do with presentation and more to do with actual content.

回复收藏 0 原文