Изменить: активный стиль псевдокласса с jQuery

Question

Я разрабатываю редактор CSS и хочу предоставить возможность изменять стиль для <button>, когда он щелкнут. Следующий код не изменяет background-color на желтый.

http://jsfiddle.net/65erbrhh/

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

Edit: В моем случае, я не могу назначить определенный класс на кнопку, потому что пользователь настраиваемый 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); 
});