Сделать более одной нажатой кнопку изменить цвет

Question

Допустим, у меня есть 10 красных кнопок. Я хочу, чтобы они меняли цвет на синий после щелчка и оставались синими независимо от того, где я нажимаю после этого. Сейчас я использую: active и что он делает, он только поворачивает цвет для самой последней нажатой кнопки и возвращается к оригиналу после того, как я щелкнул что-нибудь еще.

Но я хочу, чтобы все нажатые кнопки на моей странице превратились в измененный цвет. Как это сделать?

Answer 1

Вы можете сделать это с JQuery, как это:

$(function() { 
 
    $('button').click(function() { 
 
    $(this).addClass('blue'); 
 
    }); 
 
});

button { 
 
    color:red; 
 
} 
 
    button.blue { 
 
    color:blue; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Click Me</button> 
 
<button>Click Me</button> 
 
<button>Click Me</button> 
 
<button>Click Me</button> 
 
<button>Click Me</button> 
 
<button>Click Me</button> 
 
<button>Click Me</button> 
 
<button>Click Me</button> 
 
<button>Click Me</button> 
 
<button>Click Me</button>

Answer 2

Для достижения этой цели в CSS, вам нужно использовать немного обмана с участием transition-delay собственности; в нормальном состоянии кнопки, установите его на смехотворно высокое число и сбросьте его до 0s в активном состоянии кнопки.

button{ 
    background:red; 
    transition:background .25s linear 999999s; 
} 
button:active{ 
    background:blue; 
    transition-delay:0s, 
}