css - INPUT 提交的按下状态是否有 CSS 类？

Question

当按下 INPUT submit 元素时，它看起来是“按下的”。是否有用于 INPUT submit 按下状态的 CSS 类？不幸的是，:active 类

input:active {
    background-color: red;
}

没有做正确的工作，因为它在“按下”时保持事件状态，即使指针不再位于提交上。

有没有办法使用纯 CSS 完成此操作，还是我需要 JavaScript？

[编辑]

看一个普通的(无样式的)提交按钮(http://jsfiddle.net/j39nw/)。如果你按下它，它看起来会“降低”。现在，按住鼠标按钮并将鼠标指针移到按钮外。如您所见，指针一离开按钮，“降低”效果就消失了，即使它仍然被按下也是如此。使用 active 或 focus 类，您无法获得这样的效果，因为即使它不再存在，它仍然看起来很受压。

Answer 1

用 css 无法做到这一点，但如果你用 jquery 检查 mouseenter/mouseleave 状态，你可以添加一个类并将焦点应用到该类.

$('.input').on('mouseenter', function(){
    $(this).addClass('hover');
}).on('mouseleave', function() {
    $(this).removeClass('hover');
    $(document).on('mouseup', function() {
        $('.input').blur();
    });
});

编辑:当鼠标移出元素时，元素失去焦点。当鼠标按钮仍被按住时将其移回，该元素将重新获得焦点。

参见:http://jsfiddle.net/RJvLE/4/

编辑#2:正如@Daniel 在评论中建议的那样，当使用 active 而不是 focus 时，代码会变得更容易一些，参见。 http://jsfiddle.net/Rw7F4/