更改:活动伪类'使用jQuery的样式

Change :active pseudo-class' style with jQuery

本文关键字：使用 jQuery 样式 活动 更改      更新时间：2023-09-26

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

http://jsfiddle.net/65erbrhh/

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

编辑：在我的情况下，我不能为按钮分配特定的类，因为它是用户自定义的html

由于不能根据CSS状态选择元素，因此可以选择在元素中添加一个类：

更新示例

$('a').click(function (e) {
    e.preventDefault();
    $('button').addClass('active-style');
});

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

但是，既然您说不能这样做，您也可以为mousedown/mouseup事件附加一个事件侦听器，并相应地更改背景颜色：

更新示例

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

但是，如果您希望示例在button元素的外部运行mouseup，则需要监听所有mouseup事件：

更新示例

$('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);
});
相关文章：