Social Icon Hover

그래서 나는 당신이 그 위에 마우스를 갖다 대면 단색의 사교적 인 아이콘이 다른 색을 갖도록 만들 수 있습니다. 나는 상상할 수있는 모든 것을했고 많은 행운이 없었습니다. 미리 감사드립니다.Social Icon Hover

.social { 
      position: fixed; 
      top: -25; 
      right: 0; 
      padding: 20px; 
      z-index:99 
      } 

    .social ul { 
     overflow: auto; 
     list-style-type: none; 
    } 

    .social ul li { 
     float: left; 
    } 

    .social img { 
     padding: 7px; 
     } 

    .social img:hover { 
     filter: gray; /* IE6-9 */ 
     -webkit-filter: grayscale(0%); 
     } 

<div class="social"> 
    <ul> 
     <li><a href="#" target="blank"><img src="img/social/fb.png"></a></li> 
     <li><a href="#" target="blank"><img src="img/social/twitter.png"></a></li> 
     <li><a href="#" target="blank"><img src="img/social/soundscloud.png"></a></li> 
     <li><a href="#" target="blank"><img src="img/social/spotify.png"></a></li> 
     <li><a href="#" target="blank"><img src="img/social/instagram.png"></a></li> 
     <li><a href="#" target="blank"><img src="img/social/youtube.png"></a></li> 
    </ul> 
</div>

출처

2014-12-13 Sterling Savariau

당신이 다른 '무슨 뜻인지 정확하게 정의 할 수 있습니다 [아이콘] 위로 마우스를 가져 가면 색상이 변경됩니까? –

'fontastic' 또는'fontawesome'과 같은 것을 사용 해본 적이 있습니까? 이걸로 정말 쉽게 할 수 있습니다. – Dorvalla

다른 배경 이미지를 사용하고'li : hover'로 이것을 변경하는 방법에 대해 생각해 보셨습니까? ' '에게 u've 지금까지 수행으로 다음 사용하십시오 리튬의에 바란 정상 이미지를 relative'을 추가 : 당신이 모두 색과 그레이 스케일 버전으로 이미지를 렌더링하여이를 달성 할 수 있지만 ,'위치를 추가 . 그러면 span을 'li span {display : none; position : absolute}'을 정의하고 'li : hover span {display : block};에 대해 정의하십시오' 임시 해결책으로. –

이 시도 :

.social ul li a:hover { 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
    filter: grayscale(100%); 
    filter: url(grayscale.svg); /* Firefox 4+ */ 
    filter: gray; /* IE 6-9 */ 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
}

jsFiddle을 : http://jsfiddle.net/cmx4uh11/

출처

2014-12-13 11:33:09

작동하지 않았습니다. 이 코드는 무엇을할까요? –

jsFiddle 링크를 확인하셨습니까? –

여기 : http://unidevelopment.pl (아래쪽) 이미지에 마우스를 올려 놓고 그레이 스케일에서 컬러로 변경하는 예제가 있습니다. –

시도가 fontastic.me 또는 이것에 대한 다른 아이콘 글꼴을 사용 할 수 있습니다.

아이콘 글꼴을 사용하면 간단하게 만들 수 있습니다. 그래서 당신이 할 필요한 것은 (단지 예를 들어)입니다 :

<i class="icon icon-facebook"></i>

그리고 스타일 :

.icon { 
color: red; 
} 
.icon:hover { 
color: green; 
}

출처

2014-12-13 11:45:32

슬프게도, 나는이 프로젝트에 참여할 수 없다. 그러나 나는 계정을 만들었습니다. 나중에 참조 해 주셔서 감사합니다. –

다른 방법은 png 스프라이트를 사용하는 것입니다. –

색상이 채워진 png를 작성 하시겠습니까? –

시도 :

.social li a img { 
-webkit-filter: grayscale(100%); 
-moz-filter: grayscale(100%); 
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%); 
filter: grayscale(100%); 
} 

.social li a img:hover { 
-webkit-filter: grayscale(0); 
-moz-filter: grayscale(0); 
-ms-filter: grayscale(0); 
-o-filter: grayscale(0); 
filter: grayscale(0); 
}

출처

2014-12-13 11:56:14 Rounin

Social Icon Hover

답변

관련 문제