javascript - 更改 :active pseudo-class' style with jQuery

Question

我正在开发一些 CSS 编辑器，并希望能够为 <button> 提供更改样式的功能。当它被点击时。以下代码不会更改 background-color变黄。

http://jsfiddle.net/65erbrhh/

$('a').click(function() {
    event.preventDefault();
    $('button:active').css('background-color', 'yellow');
});

编辑:在我的例子中，我无法将特定类分配给按钮，因为它是用户可自定义的 html。

Answer 1

由于您无法根据 CSS 状态选择元素，因此一种选择是向元素添加一个类:

Updated Example

$('a').click(function (e) {
    e.preventDefault();

    $('button').addClass('active-style');
});

button.active-style:active {
    background-color: yellow;
}

---

但是既然你说你不能那样做，你也可以为 mousedown/mouseup 事件附加一个事件监听器并相应地改变背景颜色:

Updated Example

$('a').click(function () {
    event.preventDefault();

    $('button').on('mousedown mouseup', function (e) {
        $(this).css('background-color', e.type === 'mousedown' ? 'yellow' : '');
    });
});

..但是如果你想让这个例子在 button 元素的 mouseup 外面 工作，你需要听 < em>所有 mouseup 事件:

Updated Example

$('a').click(function (e) {
    e.preventDefault();

    $('button').addClass('active-style');
});

$(document).on('mousedown mouseup', function (e) {
    var color = (e.type === 'mousedown' && $(e.target).hasClass('active-style')) ? 'yellow' : '';
    $('button.active-style').css('background-color', color);
});