たとえば次のようなHTMLを書いたとき。

<a href="#" data-color="#ff0066">リンク文字列</a>

カスタムデータ属性（この場合は「data-color」）で指定した値を、マウスホバー時のテキストカラーとして使う方法を紹介します。

現在のCSSの仕様では、要素の属性値を直接CSSのプロパティ値として使用することはできないので、JavaScriptやjQueryを使用してこの動作を実現することになります。

JavaScriptの場合

以下のJavaScriptコードで、マウスがリンクにホバーされたときに、data-color属性の値をリンクのテキストカラーとして使うことができます。

<script>
window.onload = function() {
    var links = document.querySelectorAll('a[data-color]');
    links.forEach(function(link) {
        link.addEventListener('mouseover', function() {
            this.style.color = this.getAttribute('data-color');
        });
        link.addEventListener('mouseout', function() {
            this.style.color = '';
        });
    });
};
</script>

jQueryの場合

jQueryの場合はもう少し簡潔に実現することが可能です。

<script>
$(document).ready(function(){
    $('a[data-color]').hover(
        function() {
            var hoverColor = $(this).attr('data-color');
            $(this).css('color', hoverColor);
        }, function() {
            $(this).css('color', '');
        }
    );
});
</script>

これでページ内のdata-color属性を持つすべての<a>要素に対してイベントが発生します。

注意点

なお、ページの読み込み後に追加されたリンクに対しては動作しません。
そのようなリンクにも対応するには MutationObserver などのAPIを使用しましょう。

以上。
ぜひお試しください。