How do I set a darker background color on hover *without knowing the original color*?

Question

I've tried everything related to filter and backdrop-filter, but nothing seems to work. I've searched online but not found a single article addressing this (which is odd).

I simply want to set the background-color to be slightly darker than the current color, without knowing the color in advanced. That is, I do not want to "hardcode" a specific color to change to, but want it to be dynamically determined from the original background-color.

I can almost swear that I had this working at one point, too, but something made me stop using it. Probably some glitch or bug or something which didn't make it work as expected.

For example (this is not working code):

table tr { background-color: #FFF; }

table tr:hover { background-color: "original but 25% darker, meaning kind of greyish in this particular case"; }

I suspect that the reason that filter didn't work was that it made the entire object brighter/darker -- not just the background color. backdrop-filter appears to have no effect whatsoever on my end.

Answer 1

You can do this with a transparent background say 60% alpha black and two nested elements.

Set the colour to the parent element background and the transparent black on the child background when the hover occurs.