javascript - 按钮按下效果在 css 中不起作用

Question

我想在 css 中有这个按钮被按下的效果。我的意思是，例如，假设我按下一个按钮，然后我想更改它的 css，以便它看起来被按下。这是我试过的东西。但它不起作用。我使用了网站上的示例。但是按钮的尺寸变小了，看起来不一样了。这是代码的链接 http://jsfiddle.net/goku/GdD34/

.pressed{ 
  position:relative;
  top: 3px;
  color: #fqq;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}
input.happy {
    background-image: url(/img/happy.png);
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    width: 64px;
    height: 64px;
    margin: 10px;
    cursor: pointer;
    border-radius:8px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    box-shadow: 0px 3px 5px #000;
    -moz-box-shadow: 0px 3px 5px #000;
    -webkit-box-shadow: 0px 3px 5px #000;
}


$('.happy').click(function() {
    alert('hello');
    $('.happy').attr('class','pressed');
});

<input type="button" class="happy">

Answer 1

只是使用了 :active 伪类。

input.happy:active { /* Your style */ }