Question

我有一个用HTML标签创建的简单按钮，可以直观地按下并在点击时将用户发送到某个页面。我可以在正常点击时让它工作，但是当用户取消单击鼠标或将鼠标从按钮上移开时，我希望按钮“释放”（返回到原始状态）。我已经看了其他建议，但没有找到一个按照我想要的方式工作的建议。下面是我正在使用的代码（我知道在当前的JQuery代码中，当用户离开时，'mouseup'功能不会触发;我只是没有找到合适的替代品，所以我又回到了什么工作原来）。我愿意使用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);
    });
});

Answer 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;
}

Answer 2

您正在使用CSS3，因为您正在应用框阴影。

出于这个原因，我会废除使用jQuery动画并使用CSS3。维护起来会更容易。

$('.letter_buttons').mousedown(function() {
    $(this).addClass('active');
}).mouseup(function() {
    $(this).removeClass('active');
});

CSS - 将此添加到.letter_buttons类

div.letter_buttons {
    /* CSS3 transitions */

    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out;
}

添加：

div.letter_buttons.active {
    left: 1px;
    top: 1px;
    box-shadow: 0px 0px 0px #888;
}

在mouseleave或mouseup上使Button“释放”

2 个答案: