想用內聯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中文網其他相關文章！