Как изменить цвет социальной иконки при перемещении с помощью мыши над ними?

Question

У меня есть одна проблема с my site. У меня есть социальная панель значков на моем сайте и хочу изменить цвет при перемещении с помощью мыши над ним.

Я говорю об этой части:

и хочу сделать, как было в этом site:

Заранее спасибо!

Answer 1

Вы хотели бы использовать селектор парения, но и для различных цветов для каждой ссылки, вам нужно поставить имя класса для ссылки перед классом значка так:

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

Вы можете изменить «синий» для любого оттенка синего, который вы хотите.

Вы также можете добавить использовать свойство перехода иметь цвет увядает в и при наведении курсора мыши, как это:

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

Answer 2

Это worknig гуманного, что я делаю сам.

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; 
    } 

Вставить правильный класс в каждый элемент.