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按钮，释放鼠标时必须确保指针位于新{上方} {1}}按钮，这就是you must make them the same size。

的原因

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具有之后分配事件加载。

此外，您必须在点击功能中使用'$（this）'代替'$（“。happy”）'，以便仅将样式应用于单击的按钮。

Answer 5

你的代码中有一些东西（小提琴）：

我想你想使用一个javascript框架（比如jQuery），你没有在小提琴中选择一个。
你在小提琴中有一个拼写错误，在$('happy')函数内部，所以找不到任何元素。
您在javascript中删除了“happy”类，并将其替换为press。您可能希望同时应用$('.happy').attr('class', 'happy pressed');但是要将.pressed更改为input.pressed并移至.happy以下
也许您不希望所有按钮更改，请在函数内使用$(this).attr(...)

按钮效果不起作用于CSS

5 个答案: