Question

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

.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

尽管有其他答案，但ID允许以HTML5中的数字开头。在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>

Answer 2

在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

Answer 3

CSS ID名称不能以数字开头。

Answer 4

您用于悬停的CSS是错误的。 transform变换元素（即旋转元素）。

您需要的是这样的

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

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

4 个答案: