css - 有没有办法使用 CSS 以编程方式显示十六进制颜色的反转？

Question

例如我的页脚颜色是这样的:

.footer {
    background-color: #808080;
}

悬停时，我想显示反色？

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

这可能吗？

Answer 1

你可以像这样反转颜色:

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