Fix: CSS hover not working


So you’re trying to use CSS to create a hover for a class you’ve created, but it doesn’t seem to be working. The issue maybe one extra space. Notice below in the example that does work (the top one), there is no space between the colon in “.tile-normal:hover”. In the one that doesn’t, there is a space in between and that’s the issue. Here’s the example:

Does work:

.tile-normal
{
    width: 150px;
    height: 150px;
    position: absolute;
    font-size: 16px;
    background-color: Blue;
}

.tile-normal:hover
{
    background-color: Green;
}

Does not work:

.tile-normal
{
    width: 150px;
    height: 150px;
    position: absolute;
    font-size: 16px;
    background-color: Blue;
}
.tile-normal: hover
{
    background-color: Green;
}

Leave a comment

Please note that we won't show your email to others, or use it for sending unwanted emails. We will only use it to render your Gravatar image and to validate you as a real person.