我正試圖讓它，當我點擊文本，這是一個按鈕，它顯示'復制'的文字比我點擊按鈕的持續時間更長。當我想顯示文本時，我沒有問題，我只是需要“復制”的消息顯示更長時間。

.hexcodeStyle {
  font-size: 30px;
  font-weight: normal;
  margin-right: 15px;
  margin-left: 8px;
  text-align: center;
  background-color: white;
  position: relative;
  border: white solid 0;
}


.hexcodeStyle:before {
  --scale: 0;
  
  position: absolute;
  
  top: -.25rem;
  left: 50%;
  padding: .3rem;
  width: max-content;
  background: lightgray;
  transform: translateX(-50%) translateY(-100%) scale(var(--scale));
  border-radius: .3rem;
  text-align: center;
  color: black;
  font-size: 12px;
  transition: 100ms;
  transform-origin: bottom center;
}

.hexcodeStyle:hover::before{
  --scale: 1;
  content: 'Copy color';
  
}

.hexcodeStyle:active::before{
  
  content: 'Copied!';
  
}

<script>
function copyHex(celement) { 
    let hexCopy = celement.innerText;
    let input = document.createElement('input');
    input.setAttribute('value', hexCopy);
    document.body.appendChild(input);
    input.select();

    document.execCommand('copy');
    document.body.removeChild(input);

}



$(document).ready(function() {
    $('.hexcodeStyle').click(function() {
        $(this).addClass('active');
        setTimeout(function(){
            $(':active::before').removeClass('active');
        },2000);          
    });        
});
</script>

我試圖將過渡添加到活動狀態，但這不起作用