按钮按下效果在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 */ }

Answer 2

您有一些语法错误。

关于这个问题最好事件不会.click()其.mousedown() ;

当您单击不发布按钮时：

$('.happy').mousedown(function() {
        $('.happy').attr('class','pressed');
    });

我相信现在可以使用了： http : //jsfiddle.net/HKZ7M/

然后，当您释放鼠标时，将其归还旧类。

当您单击按钮然后释放它时

    $('.happy').mousedown(function() {
        $('.happy').attr('class','pressed');

        $('.pressed').mouseup(function() {
            $('.pressed').attr('class','happy');
        });
    });

工作正常： http : //jsfiddle.net/Xx2Gn/

重要说明： .pressed按钮小于.happy按钮，当释放鼠标时，必须确保指针位于新的.pressed按钮上方，因此必须将它们设置为相同大小 。

Answer 3

发生这种情况是因为您要替换该类而不是添加新的类。 您应该使用：

$('.happy').addClass('pressed');

代替 ：

$('.happy').attr('class','pressed');

因为当您执行此操作时，您将删除先前应用于它的所有css。 另一个选择是将宽度/高度或任何其他CSS添加到pressed类中。

Answer 4

我建议您将CSS，和JS的顺序更改为：

<style>
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;
}
input.happy.pressed{ 
  position:relative;
  top: 3px;
  color: #fqq;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}
</style>
<script>
$(function(){
    $(".happy").click(function(){
        $(this).addClass("pressed");
    });
});
</script>
<input type="button" class="happy">

注意，“ $（function（）{”位表示“在页面加载后执行此操作”。“ addClass”会将类添加到元素的类列表中，但是必须在DOM加载后分配事件。

另外，您必须在click函数中使用'$（this）'而不是'$（“。happy”）'，以便仅将样式应用于单击的按钮。

Answer 5

您的代码中有几件事（小提琴）：

• 我想您想使用一个javascript框架（如jQuery），却没有在提琴中选择一个。
• 小提琴中有一个错字，在函数中它说$('happy')所以找不到元素。
• 您可以在javascript中删除“快乐”类，然后将其替换为“按下”。 也许您想同时应用$('.happy').attr('class', 'happy pressed'); 但是为了改变， .pressed输入。 input.pressed并移到下面.happy
• 也许您不希望所有按钮都更改，请在函数内部使用$(this).attr(...)