用 jQuery 改变 :active 伪类的样式

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' : '');
    });
});

..但如果您希望示例在mouseup 在button 元素之外 工作，则需要收听all 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);
});