Hover state CSS


I’m trying to add CSS hover states to my HTML elements via a static stylesheet, but they don’t seem to render.

Has anyone done this before? or know if it’s possible?

Any help much aprpeciated.


This is possible, I’ve done this in some of my own Dash apps. Can you share a small, reproducable example that demonstrates what you have tried and what didn’t work?


Here is a code sample that should reproduce the problem:

  • app.py:
import dash_core_components as dcc
import dash_html_components as html
import dash_table
import pandas as pd

from base64 import b64encode
from datetime import datetime as dt
from os import path as os_path

PREFIX = '/'

app = dash.Dash(
    assets_url_path=PREFIX + 'assets/',
    assets_folder= os_path.join(os_path.dirname(os_path.abspath(__file__)), 'assets/')

app.layout = html.Main(
            'This is an inline hyperlink.',

if __name__ == '__main__':
        'routes_pathname_prefix': PREFIX,
        'requests_pathname_prefix': PREFIX,
  • assets/style.css:
a {
  text-decoration: underline;
  color: inherit;
  transition: opacity 100ms ease-in-out; }
  a:hover, a:active {
    color:   #df0a0b; }

Nothing happens if I hover it. Idem if I go in my browser’s developer tool and “trigger” the hover state.

It only change if I manually change the colour in my browser’s developer tool while the hover state is selected.


@chriddyp can you reproduce the issue with my MWE?