我的 CSS 悬停以更改按钮的背景颜色不起作用 [重复]答案

【问题标题】：My CSS on hover to change a button's background color isn't working [duplicate]我的 CSS 悬停以更改按钮的背景颜色不起作用 [重复]
【发布时间】：2020-09-28 12:30:18
【问题描述】：

我想在悬停时更改一些按钮的背景颜色，所以我用 CSS 编写了一个代码。我为 2 个按钮编写了相同的代码，两个按钮都有不同的十六进制代码。但是，只有一个按钮的代码有效。工作代码如下：

#sa:hover {
    background-color:burlywood;
}

无效的代码如下：

#7w:hover {
    background-color:black;
}

注意 7w 和 sa 是按钮的名称，如果需要，这些是它们的 HTML 代码。

<button class="projb" id="7w" onclick="ww()">???? 7 Wonders ????</button>
<button class="projb" id="sa" onclick="sa()">???? Save animals ????</button>

如果你想知道 projb 是什么类，这里是 CSS 中的类 ode-

.projb {
    margin-top: 100px;
    font-family: Lora, "serif";
    font-size: 29px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    width: 24.5%;
    height: 400px;
}

.projb:hover {
    -webkit-transform: translate(0px, -10px);
    -moz-transform: translate(0px, -10px);
    -ms-transform: translate(0px, -10px);
    -o-transform: translate(0px, -10px);
    transform: translate(0px, -10px);
}

【问题讨论】：

html ids 不能以数字开头
@LuudJacobs 不正确。 HTML5 取消了对 ID 的限制，因此它们几乎可以包含除空格以外的任何字符。
@HereticMonkey 啊，我的错。感谢您指出了这一点。可能值得注意的是，在 CSS 中，它只有在转义时才起作用，如下面的答案中所指出的那样。

标签： html css

【解决方案1】：

css 中的 ID 不允许以数字开头。

在 CSS 中，标识符（包括选择器中的元素名称、类和 ID）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 (_)；它们不能以数字、两个连字符或一个连字符后跟一个数字开头。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（请参阅下一项）。例如，标识符“B&W？”可以写成“B\&W\?”或“B\26 W\3F”。 （此文本部分复制自w3.org）

文学：

我确实将您的 ID #7w 更改为 #aw。它现在正在工作。

html

<button class="projb" id="aw" onclick="ww()">? 7 Wonders ?</button>
<button class="projb" id="sa" onclick="sa()">? Save animals ?</button>

css

#sa:hover {
    background-color:burlywood;
} 
#aw:hover {
    background-color:black;
}
.projb {
    margin-top: 100px;
    font-family: Lora, "serif";
    font-size: 29px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    width: 24.5%;
    height: 400px;
}

.projb:hover {
    -webkit-transform: translate(0px, -10px);
    -moz-transform: translate(0px, -10px);
    -ms-transform: translate(0px, -10px);
    -o-transform: translate(0px, -10px);
    transform: translate(0px, -10px);
}

这里是example！

如果您仍然需要这些数字，这篇文章可能会对您有所帮助。Link

【讨论】：

@Fifi，感谢您的修复！
在 HTML5 中，IDs can begin with numbers... 你只需要在 CSS 中转义它们。

【解决方案2】：

尽管有其他答案，但在 HTML5 中允许 ID 以数字开头。在 CSS 中，您只需正确转义数字即可。我找到的最好的文章是Mathias Bynens' article on escaping things in CSS，它明确提到了前导数字，并告诉我们可以通过在数字前加上\3 和空格后缀来转义它们：

#sa:hover {
    background-color:burlywood;
} 
#\37 w:hover {
    background-color:black;
}
.projb {
    margin-top: 100px;
    font-family: Lora, "serif";
    font-size: 29px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    width: 24.5%;
    height: 400px;
}

.projb:hover {
    -webkit-transform: translate(0px, -10px);
    -moz-transform: translate(0px, -10px);
    -ms-transform: translate(0px, -10px);
    -o-transform: translate(0px, -10px);
    transform: translate(0px, -10px);
}

<button class="projb" id="7w" onclick="ww()">? 7 Wonders ?</button>
<button class="projb" id="sa" onclick="sa()">? Save animals ?</button>

【讨论】：

【解决方案3】：

您的悬停 CSS 错误。 transform 转换一个元素（即旋转它）。

你需要的是这样的：

.projb:hover {
    background-color: #f5f5f5;
}

【讨论】：

【解决方案4】：

CSS id 名称不应以数字开头。

【讨论】：