CSS: lighten an element on hover

Question

Assuming an element is at 100% saturation, opacity, etc... how can I have its background become slightly lighter when it is hovered?

The use case is tha

Answer 1

You want to change the background-color lightness of any element that is hovered without using opacity. Unfortunately. I don't think this is possible without setting specific background-color values for your hovers.

The use case is that I'm allowing a user to hover over any element on a page. I don't want to go around determining each colors equivalent at 80% opacity.

There is one alternative that I can think of but it would require a translucent PNG overlay on the entire element, which will also cover any of the element's contents. Thereby not solving your problem.

Related Question: Dynamically change color to lighter or darker by percentage CSS (Javascript)