たとえば次のような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を使用しましょう。
以上。
ぜひお試しください。