0

I want to have this button pressed effect in css. I mean for example lets say I press a button then I want to change its css so that it looks pressed. Here is something that I tried. But it's not working. I used example from a site. But the button's size gets smaller and it looks different. Here is the link for the code 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">
4

5 回答 5

0

我建议您将 CSS、the 和 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")' 以仅将样式应用于单击的按钮。

于 2013-01-27T13:57:26.843 回答
0

您的代码中有一些内容（小提琴）：

  • 我猜你想使用一个 javascript 框架（比如 jQuery），你没有在小提琴中选择一个。
  • 你在小提琴中有一个错字，在它说的函数内部，$('happy')所以不会找到任何元素。
  • 您删除 javascript 中的“快乐”类并将其替换为按下。也许您想同时应用两者$('.happy').attr('class', 'happy pressed');但是然后更改.pressed为input.pressed并移至下方.happy
  • 也许您不希望所有$(this).attr(...)按钮都更改，请在函数内部使用 use
于 2013-01-27T14:01:28.500 回答
0

刚刚使用了 :active 伪类。

input.happy:active { /* Your style */ }
于 2013-01-27T13:52:19.550 回答
0

你有一些语法错误。

最好的事件不是.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按钮上方，这就是为什么您必须将它们设置为相同大小的原因。

于 2013-01-27T13:53:17.153 回答
0

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

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

代替 ：

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

因为当你这样做时，你会删除之前应用到它的所有 CSS。您的另一个选项是将宽度/高度或任何其他 css 添加到pressed类中。

于 2013-01-27T13:53:28.043 回答