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

# タイトルの意味とは？
ホバーしたら色が変わるページってあるじゃないですか。
モノクロだったりグレーなロゴがホバーして色がつくスポンサー企業的なページにあるようなやつ。
例えばTwitterのアイコンがTwitterロゴの色(#1DA1F2)になるとか。
![twHov.gif](https://qiita-image-store.s3.amazonaws.com/0/279132/7cc3a191-977b-4fd8-adfa-a99a271655b3.gif)

**これです。**

# 全部統一の色であれば...
```css:style.css
#item{
   color: #f00;
}
#item:hover{
    color: #00f;
}
```
とやればいいのですが、

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

```css: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.](https://github.com/a01sa01to/Hover-ColorChange)

```html: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>
```

```js: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で指定したもの）
        });

    });
});
```

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

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

```js: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](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this)


結果は、以下の通りになりました。
![icoHov.gif](https://qiita-image-store.s3.amazonaws.com/0/279132/3241cc9a-a691-d05e-d388-ff437d5756d3.gif)

ちゃんと実装されましたね。
[実際に試す](https://repos.a01sa01to.com/Hover-ColorChange/)

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

[attr() - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/attr#Browser_compatibility)

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

```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](https://caniuse.com/#feat=css3-attr)
> メモ: attr() 関数はどの CSS プロパティでも使用することができますが、 content 以外のプロパティでの対応は実験的であり、型や単位の引数の対応はまちまちです。
> [attr() - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/attr#Browser_compatibility)


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