Question

我正在使用data*属性和画布一起玩，我发现data*属性在canvas元素中不起作用，但它适用于其他元素，如div。

我正在努力实现这一目标，如果有人将鼠标放在画布上，则应显示来自data*属性的＃strong>＆＃34; <{1}}属性的消息<＃1}}不是。当我尝试使用div标签时，会显示数据＆＃34;来自div＆＃34; 。

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（即将它们视为不匹配任何元素）。

为什么＆＃34;数据＆＃34;属性在canvas元素中不起作用

1 个答案: