使用 JavaScript 調整按鈕樣式會使 CSS :active 事件變得無用

Question

我正在用 HTML、JavaScript 和 CSS 制作一個外觀基本的 Simon 克隆，我最近編寫了一個名為displayShine(color)的函數，它就是這樣做的：當被調用時，讓我們說紅色，它使預期的 div 閃爍大box-shadow: 0px 0px 100px red 。 這是 JavaScript 函數的樣子：

function displayShine(color) {
    var toShine = document.getElementById(color);
    var hexValue;
    var secondaryHexValue;

    if (color == "red") { hexValue = "#e74c3c"; secondaryHexValue = "#c0392b"; }
    else if (color == "yellow") { hexValue = "#f1c40f"; secondaryHexValue =    "#f39c12"; }
    else if (color == "green") {hexValue = "#2ecc71"; secondaryHexValue = "#27ae60"; }
    else if (color == "blue") {hexValue = "#3498db"; secondaryHexValue = "#2980b9"; }
    else { hexValue = "#000000"; }

    finalString = ("3px 3px 0px " + secondaryHexValue + 
                           ", 2px 2px 0px " + secondaryHexValue + 
                           ", 1px 1px 0px " + secondaryHexValue + 
                           ", 0px 0px 100px " + hexValue)

    toShine.style.boxShadow = finalString;

    setTimeout(function() {
        toShine.style.boxShadow = ("6px 6px 0px " + secondaryHexValue + 
                               ", 5px 5px 0px " + secondaryHexValue + 
                               ", 4px 4px 0px " + secondaryHexValue + 
                               ", 3px 3px 0px " + secondaryHexValue + 
                               ", 2px 2px 0px " + secondaryHexValue + 
                               ", 1px 1px 0px " + secondaryHexValue);
    }, 500);
}

我也有 #red:active 的 CSS，當用戶手動按下按鈕時，它會以相同的大box-shadow: 0px 0px 100px red 。 這就是 CSS 的樣子（每種顏色都一樣，只是十六進制值不同）：

#red {
    background-color: #e74c3c;
    box-shadow: 6px 6px 0px #c0392b,
                5px 5px 0px #c0392b,
                4px 4px 0px #c0392b,
                3px 3px 0px #c0392b,
                2px 2px 0px #c0392b,
                1px 1px 0px #c0392b;
}

#red:active {
    box-shadow: 3px 3px 0px #c0392b,
                2px 2px 0px #c0392b,
                1px 1px 0px #c0392b,
                0px 0px 100px #e74c3c;
}

基本上，CSS 工作得很好，當按鈕被點擊時，它會產生一些被壓抑然后又回來的動畫，以及發光然后不發光，或者你想怎么稱呼它。 我唯一的問題是，一旦我使用任何顏色作為參數調用一些displayShine()函數，該特定元素就不再按照我希望的方式在#red:active或其他任何內容上#red:active動畫。 它在不活動時看起來仍然正確，並且:hover事件（它是用一個類而不是一個 id 完成的，所以我只需要為所有四個 Simon 彩色按鈕編寫一次）也完美地工作。 唯一的問題是當它處於活動狀態時，在這種情況下它默認為標准的#red CSS。

任何人都知道發生了什么？ 任何幫助表示贊賞，如果有人想要，我可以包含更多代碼。

Answer 1

內聯樣式（ style.foo屬性映射到的樣式）在級聯中具有最高的優先級，因此無論選擇器是什么，都將覆蓋樣式表中的任何內容。

在樣式表中定義顏色，並通過修改元素所屬的類來應用它們。