(Hover) CSS styling override

[damelunx]

So I’ve just upgraded to the latest AnkiDesktop (on Ubuntu, Version ⁨2.1.60 (76d88073)⁩ Python 3.9.15 Qt 6.4.2 PyQt 6.4.0) and had to notice that the cards of my own desks don’t look so nice anymore.
(I’ve added some buttons for certain functionalities, and those looked quite awful.)
I got most of it sorted out, but somehow I can’t override the default settings for the hover classes. So the color changes automatically to white on hover, and I don’t know how to override this behavior.
Note that this problem is only for AnkiDesktop; on my phone (AnkiDroid) it works as expected…

[NameLessGO]

Could you share screenshots + Card template: front, back, styling in preformatted text (crtl+E)

[damelunx]

Here are some simple screenshots:

[cursor not on button:]

[cursor on button; hover color should be green now:]

It’s the Basic template with

<button id="test">Don't click on me!</button>

added on the front side. For the styling I just added

#test {
background-color: red;
}
#test:hover {
background-color: green;
}

(as seen on the pictures)

PS: The topic has been changed to Card Design; but the issue is actually with Anki Dektop…

[NameLessGO]

#test {
background-color: red;
}
#test:hover {
background: green;
}

Using Stackoverflow as source: You have background-image already set, which supercedes color. Change the your CSS to just use background:
html - CSS: Change Background Color on Hover - Stack Overflow

[damelunx]

Brilliant! Haha, one of those things…