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

user_13712882 0
Viewed 115

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);
}
css html
4 Answers

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>

user_2155520

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

user_90509120

CSS id names should not begin with a number.

user_93779450

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;
}
user_73844350
Related