CSS attr(data-hover)

CSS attr(data-hover) 是一种 CSS3 新增的选择器，用于选取带有指定自定义属性的元素，可以实现动态设置样式。

语法

element[data-hover] {
  /* styles */
}

属性值

• element：需要选中的元素，可以是任意 HTML 元素。
• data-hover：自定义属性名称，可以根据需要起一个有意义的名称。
• styles：需要应用于选中元素的 CSS 样式，可以是任意有效的 CSS 样式。

示例

假设我们有以下 HTML 结构：

<ul>
  <li data-hover="red">Red</li>
  <li data-hover="green">Green</li>
  <li data-hover="blue">Blue</li>
  <li data-hover="yellow">Yellow</li>
</ul>

我们可以使用 CSS attr(data-hover) 为每个 li 添加一个鼠标悬停时的背景颜色，如下所示：

li[data-hover] {
  background-color: #ddd;
}

li[data-hover="red"]:hover {
  background-color: red;
}

li[data-hover="green"]:hover {
  background-color: green;
}

li[data-hover="blue"]:hover {
  background-color: blue;
}

li[data-hover="yellow"]:hover {
  background-color: yellow;
}

这样，当鼠标悬停在每个 li 上时，其背景颜色将会自动改变为所对应的颜色。

注意事项

• CSS attr(data-hover) 只能选中带有指定自定义属性的元素，如果元素没有该自定义属性，则不会被选中。
• 自定义属性名称可以根据需要自由设置，但要确保不与其他属性名称冲突，以免误导开发者。
• 属性值可以是任意有效的字符串，比如关键词、颜色值等。
• CSS attr(data-hover) 在某些场景下可能会影响性能，因为其需要解析属性值并实时应用样式，建议慎用。