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：在悬停上添加渐变

回答

相关问题