ソーシャルアイコンの色をマウスで移動するとソーシャルアイコンの色を変更するにはどうすればいいですか？

Question

私はmy siteと1つの問題があります。私は私のサイトにソーシャルアイコンバーを持っていて、その上にマウスで移動すると色を変えたいと思う。

私はこの部分について話：

このsiteにあったようにしたい：

事前に感謝を！

Answer 1

あなたはホバーセレクターを使いたいだろうが、リンクごとに異なる色のために、あなたはそのようなアイコンクラスの前にリンクのためのクラス名を配置する必要があります。

.58ae1dbc7fa2c .aio-icon:hover { 
     border-color: blue; 
     background-color: blue; 
    } 

あなたは「青」に変更することができますあなたが望む青の色合いのために。

また、inとoutこのようなホバー上の色落ちを持つように遷移プロパティの使用を追加することができます。

.58ae1dbc7fa2c .aio-icon:hover { 
    border-color: blue; 
    background-color: blue; 
    transition: all .3s ease-in-out; 
} 

Answer 2

これは私が自分自身を行うworknig sollutionです。

div.aio-icon:hover.advanced.faceboook { 
    border-color: #3b5996; 
    background-color: #3b5996; 
    } 
    div.aio-icon:hover.advanced.twitter { 
    border-color: #29c5f6; 
    background-color: #29c5f6; 
    } 
    div.aio-icon:hover.advanced.instagram { 
    border-color: #b16c4f; 
    background-color: #b16c4f; 
    } 
    div.aio-icon:hover.advanced.youtube{ 
    border-color: #f0251d; 
    background-color: #f0251d; 
    } 
div.aio-icon:hover.advanced.soundcloud{ 
    border-color: #ff6d00; 
    background-color: #ff6d00; 
    } 

私はすべての要素に適切なクラスを挿入しました。