输入类型按钮，以改变焦点的输入按

Question

我有一个红色的输入类型按钮。我已经使用CSS改变按钮的颜色为蓝色时，悬停。如果使用了选项卡按钮，并且它到达了输入按钮，那么它应该变为绿色。我在CSS中设置了焦点，但当我按下回车键时，它仍然是绿色的，但我想让它再次回到最初的红色。基本上，我想在按回车键后移除焦点。

我已经试过了:

<div style="position: absolute; margin: 0; left: 0; bottom: 0"> <input id=" car" class="button calculator large top-right-border transition" type="submit" /> </div>

Answer 1

在你的CSS文件中

#car { background-color: red; }
#car:focus { background-color: green; }

使用jQuery，在document ready函数中，为输入的click事件添加一个处理程序。即:

$(function() {
     $('#car').click(function() { 
         // Unfocus from the input when it's clicked
         $(this).blur();
     });
});

这将取消按钮的焦点，将css返回到"非焦点"类

Answer 2

我想知道这是否适合你- FIDDLE。

JS

var $mybutton = $('#mybutton');
$mybutton.on('focus', function(){
                                 $mybutton.css('background-color', 'green');
                                 });
$mybutton.on('blur', function(){
                                $mybutton.css('background-color', 'red');
                                });
$mybutton.hover( 
                function(){
                           $mybutton.css('background-color', 'blue');
                           },
                function(){
                           $mybutton.css('background-color', 'red');
                           }
);

或者只是CSS:

#mybutton {
    background-color: red;
    color: white;
}
#mybutton:hover {
    background-color: blue;
    color: white;
}
#mybutton:focus {
    background-color: green;
    color: white;
}