Question

我正在开发一些CSS编辑器，并希望能够在<button>点击时更改样式。以下代码不会将background-color更改为黄色。

$('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 外时工作，则需要收听所有 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);
});

使用jQuery更改：active pseudo-class'样式

1 个答案: