css3 attr屬性實現元素hover展示不確定的值

接到一個需求，樓層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