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

最近，我构建了一个博客，每个帖子都拥有独特的颜色，以增加个性。作者在创作后的CMS中选择了这种颜色，这是艺术方向的微妙触摸。

要在前端显示此颜色，我最初将值直接嵌入到内联样式属性中<article></article>元素。我的模板使用了液体，但在其他模板语言中的方法相似：

 {post in post％}
<h1 id="post-title">{{post.title}}</h1>
  {{内容}}
{％endfor％}

这很好。但是，我希望自定义颜色仅出现在悬停。由于悬停样式无法直接添加到样式属性中，因此我最初尝试了以下方法：

文章 {
  背景：Lightgray！
}
文章：悬停{
  /*不起作用！ */
  背景：继承；
}

虽然!important

我的解决方案涉及使用样式属性从CMS获取颜色，但将其存储为CSS变量而不是直接应用它：

<h1 id="post-title"> {{post.title}}</h1>
  {{内容}}

然后，该变量用于定义标准CSS中的悬停样式：

文章 {
  背景：Lightgray；
}
文章：悬停{
  /*有效！ */
  背景：var（-custom_color）;
}

现在颜色是CSS变量，我们可以扩展其使用。例如，我们可以使用自定义颜色在文章中的所有链接进行样式：

 A {
  颜色：var（-custom_color）;
}

变量的范围仅限于<article></article>元素，防止其他地方的冲突。具有独特颜色的多个帖子可以在同一页面上共存。

在大多数现代浏览器中，CSS变量支持非常出色，不包括Internet Explorer。该技术对于轻巧的CMS艺术方向非常方便，并展示了CSS变量的功能。

以上是想用内联CSS写悬停效果吗？使用CSS变量。的详细内容。更多信息请关注PHP中文网其他相关文章！