发光按钮onfocus

Question

我希望按钮具有发光效果时，通过制表符选择。谁能帮我这个。代码片段将非常有帮助。

感谢 rashmi

Answer 1

如果你正在为新版浏览器开发，你可以使用HTML5箱阴影和过渡：

button{ 
background:#000; 
color:#fff; 
border:none; 
transition:box-shadow .3s linear; 
-moz-transition:-moz-box-shadow .3s linear; 
-webkit-transition:-webkit-box-shadow .3s linear; 
} 
button:hover,button:focus{ 
box-shadow:0px 0px 15px #fff; 
-moz-box-shadow:0px 0px 15px #fff; 
-webkit-box-shadow:0px 0px 15px #fff; 
} 

演示： http://www.jsfiddle.net/ybHUy/

Answer 2

并非所有的浏览器都支持HTML5动画，但你可以看看http://colorpowered.com/blend/。

Answer 3

jQuery的因为它可以是：

$(document).ready(function() { 
    $('#yourButtonId') 
     .focus(function() { 
      $(this).addClass('yourGlowClass'); 
     }) 
     .blur(function() { 
      $(this).removeClass('yourGlowClass'); 
     }); 
}); 

JQuery的的演示：http://www.jsfiddle.net/S2H2R/3/。

我不是100％确定的CSS过滤器，但有tutorial on the CSS Filter, including glow，这应该是有用的类存储在您的CSS文件。

Answer 4

你不需要的JQuery这一点。

#yourButtonId:focus { 
    -moz-box-shadow: 5px 5px 5px #fff; 
    -webkit-box-shadow: 5px 5px 5px #fff; 
    box-shadow: 5px 5px 5px #fff; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#ffffff,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135, strength=5)"; 
    filter: progid:DXImageTransform.Microsoft.Glow(color=#ffffff,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135, strength=5); 
} 

注意，我把MSIE等同于有条件的评论一个真正的网站，这样，当IE9支持的box-shadow它不会使用过滤器回退。

Answer 5

这个怎么样？ YUI http://developer.yahoo.com/yui/examples/button/btn_example13.html