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

Question

有没有办法创建规则，允许我将链接的文本颜色悬停在背景颜色和背景颜色上，换成旧文本颜色？

以下是我不喜欢的代码示例（jsfiddle link）：

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

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

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

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

$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;    
}