ホバーで色を変えるスクリプトをつくる。

タイトルの意味とは？

ホバーしたら色が変わるページってあるじゃないですか。
モノクロだったりグレーなロゴがホバーして色がつくスポンサー企業的なページにあるようなやつ。
例えばTwitterのアイコンがTwitterロゴの色(#1DA1F2)になるとか。

これです。

全部統一の色であれば...

style.css

# item{
   color: #f00;
}
# item:hover{
    color: #00f;
}

とやればいいのですが、

例えば要素が5個あるときに、

style.css

# item1, #item2, #item3, #item4, #item5{
    color: #f00;
}
# item1:hover{
    color: #000;
}
# item2:hover{
    color: #333;
}
# item3:hover{
    color: #666;
}
# item4:hover{
    color: #999;
}
# item5:hover{
    color: #ccc;
}

というように、要素が複数あって、それぞれについてこのように記述するととても面倒くさいし、長くなってわかりづらい。

作り方について

1. CSSで初期値を指定する。
2. HTMLの属性を利用してホバー時の色を指定。
3. JSで属性を取得＆ mouseover(->ホバーされた時) と mouseout(->ホバー解除時) イベントを設定

でいけると私は考えました。

実装

一応、ソースコードはこちらにあります。
a01sa01to/Hover-ColorChange: Change the color of an element with adding an attribute.

index.html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<link href="./style.css" rel="stylesheet">
<script src="./script.js"></script>

<i class="fab fa-facebook" hovercolor="#3b5998"></i>
<i class="fab fa-twitter" hovercolor="#1da1f2"></i>
<i class="fab fa-line" hovercolor="#1dcd00"></i>
<i class="fab fa-youtube" hovercolor="#cd201f"></i>

script.js

window.addEventListener('load',()=>{  // index.html読込時

    const elems = document.querySelectorAll('[hovercolor]');  // hovercolorという属性を持つ要素すべて

    elems.forEach((e)=>{  // 上記で指定した要素それぞれ(=e)について

        e.addEventListener('mouseover',()=>{  // ホバー時
            e.style.color = e.getAttribute('hovercolor');
            // eのテキスト色 ＝ eのhovercolorの属性値
        });

        e.addEventListener('mouseout',()=>{  // ホバー解除時
            e.style.color = "";  // 初期値に戻す（CSSで指定したもの）
        });

    });
});

style.css

i.fab{
    margin: 30px;
    font-size: 36px;
    color: #555;
}

なお、forEach((e)=>{ 内は、以下のように記述することも可能です。

script_usingThis.js

e.addEventListener('mouseover',function(){  // ホバー時 -3-
    this.style.color = this.getAttribute('hovercolor');
    // this(=ホバーされた要素)のテキスト色 ＝ thisのhovercolorの属性値
});  // -3-

e.addEventListener('mouseout',function(){  // ホバー解除時 -4-
    this.style.color = "";  // 初期値に戻す（CSSで指定したもの）
});  // -4-

ここで注意したいのは、this を使用しているために、アロー関数( ()=> )が使用できないことです。
アロー関数 - JavaScript | MDN

結果は、以下の通りになりました。

ちゃんと実装されましたね。
実際に試す

CSSだけで実装できないの？

私は当初CSSだけで実装したく、検索してみました。
すると、以下のページを見つけました。

attr() - CSS: カスケーディングスタイルシート | MDN

これを利用すれば、CSSのみで属性を取得できるため、

style.css

i.fab{
    margin: 30px;
    font-size: 36px;
    color: #555;
}
i.fab:hover{
    color: attr(hovercolor);
}

で実装できそうです。
ただし、2019.06.13現在は、この、 background や color などのプロパティに組み込む使用法はどのブラウザでもサポートされていない（実験的な）ようです。が、 content に用いることはできるそうです。
Can I use... Support tables for HTML5, CSS3, etc

メモ: attr() 関数はどの CSS プロパティでも使用することができますが、 content 以外のプロパティでの対応は実験的であり、型や単位の引数の対応はまちまちです。
attr() - CSS: カスケーディングスタイルシート | MDN

今後、これがサポートされれば開発者側からしたらとても便利になりそうですね。