Invert text color to color of bg on hover

Question

Есть ли способ создать правило, которое позволит мне изменить цвет текста ссылки на цвет фона и цвет фона до цвета старого текста?

Вот пример кода, который я не люблю (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

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

Answer 2

Лучший способ добиться этого - использовать препроцессор 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; 
}