0

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">
4

5 に答える 5

0

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 が読み込まれた後にイベントを割り当てる必要があります。

また、クリックされたボタンにのみスタイルを適用するには、クリック関数内で「$(".happy")」の代わりに「$(this)」を使用する必要があります。

于 2013-01-27T13:57:26.843 に答える
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 に答える
0

あなたのコードにはいくつかのことがあります（フィドル）：

  • javascript フレームワーク (jQuery など) を使用したいと思いますが、フィドルで選択していません。
  • 関数内でフィドルにタイプミスがある$('happy')ため、要素が見つかりません。
  • javascript 内の "happy" クラスを削除し、pressed に置き換えます。両方を適用したいかもしれませんが$('.happy').attr('class', 'happy pressed');、次に変更.pressedしinput.pressedて下に移動します.happy
  • おそらく、すべてのボタンを変更したくない場合は$(this).attr(...)、関数内で use を使用してください
于 2013-01-27T14:01:28.500 に答える