Is there a way to programmatically display the inverse of a hex color using CSS?

Question

For example my footer color is this:

.footer {
    background-color: #808080;
}

On hover, I want to display the inverse color?

.footer:hover {
    background-color: inverse color!?;
}

Is this possible?

Answer 1

You can invert the color like this:

 .footer {
    background-color: #808080;
 }
 .footer:hover { 
    background-color: #808080;
    -webkit-filter: invert(100%);
    filter: invert(100%);
 }