제목 뜻은?

멈추면 색깔이 변하는 페이지가 있잖아요.
흑백이나 회색 로고가 스폰서 페이지에 색깔이 있는 녀석.
예를 들어 트위터 아이콘은 트위터 로고 색상(#1DA1F2)이 됩니다.

이거다.

다 통일된 색깔이라면...

style.css

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

이렇게 하면 돼요.
예를 들어 다섯 가지 요소가 있을 때.
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;
}

이렇게 여러 가지 요소가 있는데 각각 이렇게 기술하면 귀찮고 길어져서 이해하기 어렵다.

제작 방법 정보

CSS에서 초기 값을 지정합니다.

HTML 속성을 사용하여 스톱 시 색상을 지정합니다.

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
결과는 다음과 같다.

설치됐네.
실제 시도

CSS만 설치할 수 없습니까?

나는 애초에 CSS로만 실시하려고 검색해 보았다.
그래서 나는 아래 페이지를 찾았다.
attr()-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
주:attr() 함수는 모든 CSS 속성에 사용할 수 있지만, 비content 속성의 대응은 실험적이며, 유형과 단위 매개 변수의 대응은 각각 다르다.
attr()-CSS: 캐스케이드 타이머
앞으로 이를 지원하면 개발자들에게 편리해질 것이다.