css - 为什么 "data"属性在 Canvas 元素中不起作用

Question

我正在一起玩 data* 属性和 canvas，我开始知道 data* 属性在 canvas 元素中不起作用，但它在其他元素上起作用像 div。

我正在努力实现，如果有人将鼠标放在 Canvas 上，则应该显示来自 data* 属性的消息 "from canvas"，但事实并非如此。当我尝试使用 div 标签时，会显示数据 “来自 div”。

CSS

canvas[data-uname]:hover:after, div[data-uname]:hover:after{
    content: attr(data-uname);
    position: absolute;
    left: 1;
    top : 3%;
    background: rgba(0,0,0,0.5);
    width:100px;
    height:20px;
}

HTML

 <canvas id="myCanvas" data-uname = "from canvas" width="200" height="100" style="border:1px solid #000000;">
    Your browser does not support the HTML5 canvas tag.
 </canvas>


<div data-uname = "from div">
    Hover on me
</div>

我很好奇为什么 data* 属性在 canvas 标签中不起作用，是我做错了什么还是默认情况下发生的。

JSFIDDLE

Answer 1

这不依赖于 data-uname 属性。如果您从选择器中省略 [data-uname] 部分，您会得到相同的结果。

问题在于 :after 伪元素不适用于 canvas 元素。更准确地说，规范不要求它工作，甚至不定义它可能意味着什么，实际上浏览器只是忽略像 canvas:after 这样的选择器(即将它们视为不匹配任何元素)。