hover時のスタイルをクリック時にも適用したい

Question

前提・実現したいこと

https://jsfiddle.net/2sxuoa3h/2/ をご覧ください。
ボタンlist1にカーソルを合わせるとボタンの色が明るくなります。
この色が明るくなるスタイル（hover時のスタイル）をマウスクリック時「ボタンがクリックされてから別のボタンがクリックされる間」にも適用したいです。

発生している問題・エラーメッセージ

適用されません。

該当のソースコード

↓に記載しました。
https://jsfiddle.net/2sxuoa3h/2/

試したこと

addClass()やcss()で以下のスタイルを追加したところ、CSS要素#test-label labelは変更されましたが#test-label label:afterは変更されませんでした。

.biz-res-label-checked {
    content: none;
    top: 0;
    background: #0C9506 !important;
    flex-wrap: wrap;
}

ご教授のほどよろしくお願い申し上げます。

Answer 1

// `querySelectorAll` が返す `NodeList` にはそもそも `forEach` があるが、一応配列にしておく
const labels = [...document.querySelectorAll('#test-label > label')];

labels.forEach(label => {
  // ラベルがクリックされたときのイベントを定義
  label.addEventListener('click', evt => {
    // すべてのラベルのうち、今回クリックされたものには active クラスを与え、
    // それ意外のラベルからは active クラスを除去する
    labels.forEach(l => {
      if(l === evt.currentTarget) {
        l.classList.add('active');
      } else {
        l.classList.remove('active');
      }
    })
  });
});

/* `#test-label label:hover` に適用しているCSSを `#test-label label.active` にも与える */
#test-label label:hover,
#test-label label.active {
  top: 3px;
}

/* ↓ listボタンが明るくなる */
#test-label label:hover::after,
#test-label label.active::after {
  top: 0;
  background: #0C9506;
}

#test-label label:hover span,
#test-label label.active span {
  top: 0;
}

#test-label label:hover span::after,
#test-label label.active span::after {
  right: 27px;
}

Comments

[sakiaa]

コードを書いてくださりありがとうございます。
jsを使ってクリック時にクラス追加・削除すればよろしかったのですね。
大変勉強になりました。
本当にありがとうございました。

Answer 2

:active擬似クラスを使えばクリック時のスタイルを表現できます。
:active擬似クラス

Comments

[sakiaa]

大変申し訳ございません、私の説明不足でした。
「ボタンがクリックされてから別のボタンをクリックするまでの間」もhover時のスタイルを適用したいです。
ご存知でしたら、恐れ入りますがご教授のほどお願い申し上げます。

Answer 3

※自己解決ではありません。

thyda.eiqauさんが教えてくださったJSコードを基にjQueryでも使えるよう書いてみました。

$("#test-label label").click(function(){
	$('#-label label').removeClass('active');
	$(this).addClass('active');
});

上記コードでも動かせました。
皆様ご回答くださりありがとうございました。