想用内联 CSS 写悬停效果？试试 CSS 变量。

前几天我正在做一个博客，每个帖子都附带一个自定义颜色，以增添个性。作者在撰写帖子时可以在 CMS 中选择该颜色。只是一层非常轻的艺术指导。

为了在前端显示该颜色，我将值直接写入 <article> 元素的内联 style 属性中。我的模板碰巧在 Liquid 中，但在其他模板语言中看起来会类似。

{% for post in posts %}
<article style="background: {{post.custom_color}}">
  <h1>{{post.title}}</h1>
  {{content}}
</article>
{% endfor %}

这里没有问题。但是后来我想，“如果自定义颜色只在悬停在文章卡片上时显示，那不是很好吗？”但是你不能在 style 属性中编写悬停样式，对吧？

我的第一个想法是保留 style 属性并编写如下 CSS

article {
  background: lightgray !important;
}
article:hover {
  /* Doesn't work! */
  background: inherit;
}

我可以通过使用 !important 来 覆盖内联样式，但是没有办法在悬停时撤消它。

最终，我决定可以使用 style 属性从 CMS 获取颜色值，但不是立即应用它，而是将其存储为 CSS 变量。

<article style="--custom_color: {{post.custom_color}}">
  <h1>{{post.title}}</h1>
  {{content}}
</article>

然后，该变量可用于在常规 CSS 中定义悬停样式。

article {
  background: lightgray;
}
article:hover {
  /* Works! */
  background: var(--custom_color);
}

现在颜色值已保存为 CSS 变量，我们可以用它做各种其他事情。例如，我们可以使帖子中的所有链接都以自定义颜色显示。

article a {
  color: var(--custom_color);
}

并且由于变量的作用域限于 <article> 元素，因此它不会影响页面上的任何其他内容。我们甚至可以在同一页面上显示多个帖子，每个帖子都以其自己的自定义颜色呈现。

CSS 变量的浏览器支持 非常广泛，除了 Internet Explorer。无论如何，这只是一个巧妙的小技巧，如果您发现自己在 CMS 中使用轻量级艺术指导，它可能会派上用场，同时也提醒了 CSS 变量有多么强大。