2017-02-22 12 views
-1

my site과 관련된 문제가 하나 있습니다. 내 사이트에 소셜 아이콘 표시 줄이 있으며 마우스로 이동할 때 색상을 변경하고 싶습니다.소셜 아이콘 색상을 마우스로 움직일 때 소셜 아이콘 색상을 변경하는 방법은 무엇입니까?

나는이 부분에 대해 이야기 :

enter image description here

과 같이 만들고 싶어하면이 site에 있었다 : 사전에

enter image description here

감사합니다!

+1

'.aio-tooltip : hover .aio-icon {background : blue; } ' –

+0

예, 한 서클이지만 다른 사람들은 어떨까요? 당신이 알아 차렸 듯이 모든 원은 다른 색을 가지고 있습니다. – Dora

+0

은 스스로 알아 내려고 시도하거나 현재 타사 사이트로 연결하는 대신 현재 가지고있는 모든 작업의 ​​데모를 작성합니다. 개인 사이트에 연결해도 다른 사용자에게는 이익이되지 않습니다. –

답변

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

안녕하세요! 'aio-icon : 호버 { border-color : blue; background-color : blue; }' 하지만 모든 서클에서 다른 색상을 사용하는 방법은 무엇입니까? – Dora

+0

위의 업데이트 된 설명을 참조하십시오! – jrrrsmith

+0

확인해 보지만 변경하지 마십시오. 클래스 '.58ae1dbc7fa2c'가 없으면 모든 원마다 파란색으로 바뀝니다. – Dora

0

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

나는 모든 요소에 적절한 클래스를 삽입했습니다.