My CSS on hover to change a button's background color isn't working

Question

I wanted to change some buttons's background colour on hover, so I wrote a code in CSS. I wrote the same code for 2 buttons, both with different hex codes. But, only one button's code worked. The Working code is as follows:

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

The code which didn't work is as follows:

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

Note that 7w and sa are the names of the buttons, and these are their HTML codes if needed.

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

If you are wondering what class projb is, here is the class ode from 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);
}

@LuudJacobs Incorrect. HTML5 lifted the limits on IDs such that they can have pretty much any character except spaces. — Heretic Monkey, Jun 09 '20 at 13:45
@HereticMonkey ah, my bad. Thanks for pointing this out. It might be worth noting that in CSS it's only working when escaped as pointed out in the answers below. — Luuuud, Jun 10 '20 at 07:12

score 3 · Accepted Answer · answered Jun 09 '20 at 13:43

Despite the other answers, IDs are allowed to start with numbers in HTML5. In CSS, you simply need to escape the number correctly. The best article I've found is Mathias Bynens' article on escaping things in CSS, which mentions leading digits explicitly, and tells us that we can escape them by prefixing the number with \3 and suffixing with a space:

#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>

Cem Firat · Answer 2 · 2020-06-09T14:23:06.890

In css IDs aren't allowed to begin with numbers.

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F". (this text section copied from w3.org)

Literatur:

I did change your id #7w to #aw. It is now working.

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);
}

Here is the example!

If you still need the numbers, this article may help you.Link

In HTML5, [IDs can begin with numbers](https://stackoverflow.com/a/14394034/215552)... You just need to escape them in CSS. — Heretic Monkey, Jun 09 '20 at 13:37

score 0 · Answer 3 · answered Jun 09 '20 at 10:51

0

CSS id names should not begin with a number.

answered Jun 09 '20 at 10:51

ImC0der

308
2
18

score -1 · Answer 4 · answered Jun 09 '20 at 10:56

-1

Your CSS for hovering is wrong. transform transforms an element (i.e. rotates it).

What you need is something like this:

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

answered Jun 09 '20 at 10:56

dave0688

5,372
7
33
64

My CSS on hover to change a button's background color isn't working

4 Answers4