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