Html 将文本颜色反转为悬停时背景的颜色

是否有一种方法可以创建一个规则，允许我悬停将链接的文本颜色更改为背景颜色，并将背景颜色更改为旧文本颜色

下面是我不喜欢（）的代码示例：

假设我想用五、七或二十种颜色！为每一个元素创建一个：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解决方案。

实现这一点的最佳方法是使用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;
}

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

---

更新（由于评论）：

我认为没有办法使用纯css阅读其他元素样式

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

---

你为什么要使用这么多颜色？不，不是用常规的CSS颜色来反映链接的类型：红色是删除一些条目，绿色是创建可能，黑色是。。。不知道，这只是一个想法）这是做不到的，你能做的最好的事情就是使用a:hover，mydiv:hover，someElement:hover{…styles}你的例子生成了一个非常简单的规则，可以通过纯CSS轻松实现。你能提供一个例子来生成OP的第二个例子吗？唯一的问题是：OP问的是不同颜色的白色背景，而不仅仅是反转的颜色。我说的是一个：所有链接的悬停规则，但无论如何，谢谢）

<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%);
}

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