在悬停时将文本颜色转换为 bg 的颜色

Question

有没有一种方法可以创建允许我在悬停时将 link 的文本颜色更改为背景颜色以及将背景颜色更改为旧文本颜色的规则？

这是我不喜欢的代码示例 (jsfiddle link)：

a {
    background-color: white;
    border: 2px solid #dea12c;
    color: #dea12c;
}
a:hover {
    background-color: #dea12c;
    color: white;
}

假设我想使用五种、七种或二十种颜色！为每个元素创建一个 :hover 规则真的很无聊，一次只为所有元素创建一个 :hover 规则会更容易、快速和优雅。它应该是这样的：

a.red {
    background-color: white;
    border: 2px solid red;
    color: red;
}
a.blue {
    background-color: white;
    border: 2px solid blue;
    color: blue;
}
...
a:hover {
    background-color: initialBorderColor;
    color: white;
}

用 JS 很容易实现这个，但我只想要 CSS+HTML 解决方案。

Answer 1

实现此目的的最佳方法是使用 CSS 预处理器，如 SASS，这有助于动态分配值。

$font-color:#dea12c;
$background-color:white;

a {
    background-color: $background-color;
    border: 2px solid #dea12c;
    color: $font-color;
}

a:hover {
    background-color: $font-color;
    color: $background-color;
}

Answer 2

Live Demo

<a>MOVE YOUR CURSOR HERE!</a> 

<a>MOVE YOUR CURSOR HERE!</a>

风格

a:nth-child(1) {
    background-color: #FFF000;
    border: 2px solid #000FFF;
    color: #000FFF;
}
a:nth-child(2) {
    background-color: #0077CC;
    border: 2px solid #FF8833;
    color: #FF8833;
}
a:hover {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

此工具可以生成反转颜色对：TOOL

更新（因为评论）：

Demo

我认为没有办法使用纯 css

来读取花药元素样式

<a class="delete">Delete</a> 
<a class="create">Create</a>
<a class="black">Black</a>

风格

.delete{
    background-color: #FFF;
    border: 2px solid #F00;
    color: #F00;    
}
.create{
    background-color: #FFF;
    border: 2px solid #0F0;
    color: #0F0;    
}
.black{
    background-color: #FFF;
    border: 2px solid #000;
    color: #000;    
}
.delete:hover{
    background-color: #F00;
    border: 2px solid #FFF;
    color: #FFF;   
}
.create:hover{
    background-color: #0F0;
    border: 2px solid #FFF;
    color: #FFF;    
}
.black:hover{
    background-color: #000;
    border: 2px solid #FFF;
    color: #FFF;    
}

在悬停时将文本颜色转换为 bg 的颜色

Invert text color to color of bg on hover

html

css

background-color

mousehover

Live Demo

Demo