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，在文档就绪函数中，为输入的click事件添加一个处理程序。即：

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

这将从按钮中失焦，将css返回到＆＃34;非焦点＆＃34;类

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;
}

输入类型按钮改变焦点进入按下

2 个答案: