按键期间改变按钮的颜色

时间:2016-03-07 13:06:34

标签: jquery html css

我想改变

的颜色
<input type='button' class='button'>

当鼠标点击或按下回车键时。

要在鼠标点击时更改颜色,我只需使用以下css

即可
.button:active{
   background-color:#FFF;
}

对于回车键,我尝试了以下jQuery代码:

$('.button').keypress(function(e){
      if(e.which == 13){
          $(this).css('background-color','#FFF')
      }
  });

但这不起作用,现在背景在返回后仍然是白色的。但是,我只希望背景在某人点击进入期间变为白色。我怎么能做到这一点?

3 个答案:

答案 0 :(得分:2)

使用按键/键盘的组合来切换颜色:

&#13;
&#13;
$("button").keydown(function(e) {
    // Sets the color when the key is down...
    if(e.which === 13) {
    	$(this).css("background-color", "red");
    }
});
$("button").keyup(function() {
    // Removes the color when any key is lifted...
    $(this).css("background-color", "");
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
Test
</button>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

试试这个

.clicked{
background:#fff !important;
}

$('.button').keydown(function(e){
      if(e.which == 13){
           $(this).addClass('clicked');
        }
 e.preventDefault();
  });

答案 2 :(得分:0)

请尝试以下代码

           $('.button').keypress(function(e){
              if(e.which == 13){
                  $(this).css('background-color','#FFF');
              }
            });

            $('.button').keyup(function(e){
              if(e.which == 13){
                  $(this).css('background-color','');
              }
            });