CSS：在懸停上添加漸變

-1

是否可以在懸停上添加漸變？我想避免圖像並使用純css3。CSS：在懸停上添加漸變

我有一個簡單的盒子 backgroundc-color：藍色whihc有一個圖標。我想在鼠標上添加漸變效果。

如何獲得梯度發光效果作爲屏幕抓取？

我試圖讓下面這樣的效果：

blue gradient

來源

2013-02-13 user244394

是的，這是可能的 – jackcogdill 2013-02-13 23:14:41

可以在CSS做梯度，雖然定義可以得到一個有點冗長。這是一個堅實的CSS3 gradient creator。

然後只需添加一個:hover到您的鏈接。

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

來源

2013-02-13 23:15:44 zakangelle

這是我會怎麼做：

.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%); 
}

那是一個完整的例子，你可以複製並粘貼它應該工作:)享受！

注意，有你的顏色在那裏，其徑向:)

來源

2013-02-13 23:22:40 DuncanLewis

這是那種你正在尋找的東西？
顯然使用你自己的顏色。

DEMO

這是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); 
}

來源

2013-02-13 23:22:56 jackcogdill

@ yentup-謝謝你。它在FF上的工作，但不適用於IE9。有沒有讓它在IE9上工作？ – user244394 2013-02-13 23:36:38

我不確定。我遺漏了默認的，也許[這]（http://jsfiddle.net/yentup/DrRda/1/）的作品？我沒有IE，所以我永遠不能測試它 – jackcogdill 2013-02-13 23:45:17

對於CSS3的最佳實踐，你可以去css3please.com。只是增加：懸停到班級會給你你需要的東西：

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

來源

2013-02-13 23:36:19

CSS：在懸停上添加漸變

回答

相關問題