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?


#5

Hi @chriddyp , any update so far ? Thanks!


#6

Hi there,

I was searching for this type of question. What I am interested is if someone could post a simple example code?

Because I would like to set the .js :hover selector to my css style for my span button e.g.

Also is it possible to add the hover selector as an attribute e.g. for the span element? Anyway it would be nice if this works.


#7

Related issue raised on GitHub.