Question

我想要按Tab键选择时按钮有发光效果。谁能帮我这个。代码片段非常有用。

感谢 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

你不需要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 3

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

Answer 4

它的JQuery可以是：

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

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

我对CSS过滤器并不是100％肯定，但是有tutorial on the CSS Filter, including glow，这对于存储在css文件中的类很有用。

Answer 5

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

发光按钮onfocus

5 个答案: