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或其他任何方式激活我想要它的方式。它在非活动时仍然看起来正确，而:hover事件（使用类而不是id完成，因此我只需要为所有四个Simon彩色按钮编写一次）也可以完美地工作。唯一的问题是它处于活动状态时，在这种情况下，它默认为标准#red CSS。

任何人都知道发生了什么？感谢任何帮助，如果有人想要，我可以包含更多代码。

Answer 1

内联样式（style.foo属性映射到的）具有the highest precidence in the cascade因此将覆盖样式表中的任何内容，无论选择器是什么。

在样式表中定义颜色，并通过修改元素所属的类来应用它们。

使用JavaScript调整按钮样式会使CSS：active event无效

1 个答案: