0

HTMLタグで作成された単純なボタンがあり、クリックすると視覚的に押し下げられ、ユーザーが特定のページに移動します。通常どおりクリックすると機能しますが、ユーザーがマウスをクリックしないか、マウスをボタンから離したときに、ボタンを「解放」(元の状態に戻す) したいと思います。私はそこにある他の提案を見てきましたが、私が望むように機能するものは見つかりませんでした. 以下は私が現在使用しているコードです (現在の JQuery コードでは、ユーザーが .最初は）。私は JQuery 以外のものを使用することにオープンです。それは最初は最高に思えました。

HTML:

<div class="letter_buttons" onclick="window.location='index.php'">Active</div>

CSS:

    .letter_buttons {
        display: inline-block;
        height: 30px;
        width: 140px;
        background-color: #b2b2b2;
        border: 3px solid #2D2D2D;
        color: #2D2D2D;
        box-shadow: 2px 2px 2px #888;
        position: relative;
        left: 0;
        top: 0;
    }

JQuery:

$(document).ready(function() {
    $('.letter_buttons').mousedown(function() {
        $(this).css('box-shadow', '0px 0px 0px #888');
        $(this).animate({left: '+=1px'}, 0);
        $(this).animate({top: '+=1px'}, 0);
    });
    $('.letter_buttons').mouseup(function() {
        $(this).css('box-shadow', '2px 2px 2px #888');
        $(this).animate({left: '-=1px'}, 0);
        $(this).animate({top: '-=1px'}, 0);
    });
});
4

2 に答える 2

1

これにJavaScriptを使用する理由がわかりません。これはすべて、いくつかの CSS ルールで実行できます。( jsfiddle )

HTML:

<a class="letter_buttons" href="#">Active</a>

CSS:

.letter_buttons {
    display: inline-block;
    height: 30px;
    width: 140px;
    background-color: #b2b2b2;
    border: 3px solid #2D2D2D;
    color: #2D2D2D;
    box-shadow: 2px 2px 2px #888;
    position: relative;
    left: 0;
    top: 0;
}

.letter_buttons:active {
    box-shadow: 0 0 0 #888;
    left: 1px;
    top: 1px;
    transition: all 0.2s;
}
于 2013-10-29T20:54:25.693 に答える