Want to Write a Hover Effect With Inline CSS? Use CSS Variables.

Recently, I built a blog where each post boasts a unique color for added personality. The author selects this color within the CMS during post creation—a subtle touch of art direction.

To display this color on the frontend, I initially embedded the value directly into an inline style attribute within the <article></article> element. My templates used Liquid, but the approach is similar in other templating languages:

{% for post in posts %}
<h1 id="post-title">{{post.title}}</h1>
  {{content}}
{% endfor %}

This worked fine. However, I wanted the custom color to appear only on hover. Since hover styles can't be directly added to style attributes, I initially tried this:

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

While !important overrides the inline style, there's no way to reverse this on hover.

My solution involved using a style attribute to fetch the color from the CMS, but storing it as a CSS variable instead of directly applying it:

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

This variable is then used to define the hover style in standard CSS:

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

Now that the color is a CSS variable, we can expand its use. For example, we can style all links within the post using the custom color:

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

The variable's scope is limited to the <article></article> element, preventing conflicts elsewhere. Multiple posts with unique colors can coexist on the same page.

CSS variable support is excellent across most modern browsers, excluding Internet Explorer. This technique is handy for lightweight CMS art direction and showcases the power of CSS variables.

The above is the detailed content of Want to Write a Hover Effect With Inline CSS? Use CSS Variables.. For more information, please follow other related articles on the PHP Chinese website!