Fix: CSS hover not working

Posted: 08/20/2012

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