CSS : 호버에 그라디언트 추가

Question

호버에 그라디언트를 추가 할 수 있습니까? 나는 이미지를 피하고 순수한 CSS3을 사용하고 싶다.

나는 단순한 상자에 backgroundc-color : blue whihc 아이콘이 있습니다. 마우스 오버시 그라디언트 효과를 추가하고 싶습니다.

어떻게 그 그래디언트 효과를 화면 캡처로 얻을 수 있습니까?

나는 아래이 효과를 얻기 위해 노력하고 있어요 : 당신은 CSS에 그라데이션을 할 수

Answer 1

, 정의가 조금 자세한 얻을 수 있지만. 여기에 단색 CSS3 gradient creator입니다.

그런 다음 :hover을 링크에 추가하십시오.

.your-link:hover { 
// gradient here 
} 

Answer 2

이것은 내가 어떻게 할 것입니다 :

.link:hover { 
background-image: -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 116, color-stop(1%, #57fdfe), color-stop(100%, #2c95dd)); 
background-image: -webkit-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%); 
background-image: -moz-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%); 
background-image: -ms-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%); 
background-image: -o-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%); 
background-image: radial-gradient(farthest-side at center bottom, #57fdfe 1%, #2c95dd 100%); 
} 

완전한 예 그게 전부, 당신은 그냥 복사 및 붙여 넣기하고 즐길 :) 작업을해야 할 수 있습니다! 거기에 당신의 색상을 가지고 있으며 반경 :

Answer 3

참고이 당신이 찾고있는 물건의 종류인가?
분명히 나만의 색을 사용하십시오.

.blah:hover { 
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0198E1), to(#00FFFF)); 
    background-image: -webkit-linear-gradient(top, #0198E1, #00FFFF); 
    background-image: -moz-linear-gradient(top, #0198E1, #00FFFF); 
    background-image:  -ms-linear-gradient(top, #0198E1, #00FFFF); 
    background-image:  -o-linear-gradient(top, #0198E1, #00FFFF); 
} 

Answer 4

CSS3에 대한 모범 사례를 들어, css3please.com에 갈 수

DEMO

이

는 CSS입니다. 그냥 추가 : 수업에 마우스를 가져 가면 필요한 것을 제공합니다.

.box_gradient:hover { 
    background-color: #444444; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Chrome, Safari 4+ */ 
    background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10-25, iOS 5+, Safari 5.1+ */ 
    background-image: -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */ 
    background-image:  -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00 */ 
    background-image:   linear-gradient(to bottom, #444444, #999999); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */ 
}