html - 我在悬停时更改按钮背景颜色的 CSS 不起作用

Question

这个问题在这里已经有了答案:





Can I have an element with an ID that starts with a number?

(8 个回答)


去年关闭。




我想在悬停时更改一些按钮的背景颜色，所以我用 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);
}

Answer 1

尽管有其他答案，但 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>