css - CSS: ホバー時にグラデーションを追加する

Question

ホバー時にグラデーションを追加することは可能ですか? 画像を避け、純粋な css3 を使用したい。

backgroundc-color: blue のシンプルなボックスにアイコンがあります。マウスオーバー時にグラデーション効果を追加したい。

画面グラブとしてグラデーショングロー効果を得るにはどうすればよいですか?

以下でこの効果を得ようとしています：

Answer 1

定義は少し冗長になる可能性がありますが、CSS でグラデーションを作成できます。これは堅実なCSS3 グラデーション クリエーターです。

:hover次に、リンクに a を追加します。

.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

これはあなたが探しているようなものですか？
明らかにあなた自身の色を使用してください。

デモ

これはcssです：

.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 にアクセスしてください。クラスに :hover を追加するだけで、必要なものが得られます。

.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+ */
}