Hover state CSS


#1

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.


#2

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?


#3

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(
    __name__,
    url_base_pathname=PREFIX,
    assets_url_path=PREFIX + 'assets/',
    assets_folder= os_path.join(os_path.dirname(os_path.abspath(__file__)), 'assets/')
)

app.layout = html.Main(
    [
        html.A(
            'This is an inline hyperlink.',
            href='/',
        ),
    ]
)

if __name__ == '__main__':
    app.config.update({
        'routes_pathname_prefix': PREFIX,
        'requests_pathname_prefix': PREFIX,
    })
    app.run_server(
        debug=True,
    )
  • 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.


#4

@chriddyp can you reproduce the issue with my MWE?