css3-attr属性实现元素hover展示不确定的值

• 什么是 attr
• 用法
• 兼容
• test pre-commit doctoc

接到一个需求，楼层 hover 时候展示当前楼层的name和order。

• 方案一 js

  这个我就不细讲了，不是这边文章想要讲的

• 方案二 css3 attr 属性

  对浏览器兼容不是很在意可以使用。

什么是 attr

CSS 表达式 attr() 用来获取选择到的元素的某一 HTML 属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素。 -- MDN

MDN 建议用于 content，其它还在实验中。

用法

// react组件

<div data-name={`${name}`} className="tip"></div>

.tip

&:hover

&:before

display block

content attr(data-name)

兼容

can i use

test pre-commit doctoc