CSS change background color on hover

Question

Why is this not working?

            <div class="homePrizes">
                <div class="homeCredit">
                    1250 Points
                </div>
                <div class="homePrize">
                    Prize1
                </div>
            </div>

CSS:

.homePrizes {
    clear:both;
    width:100%;
    line-height:30px;
}

.homeCredit {
    font-size:14px;
    color:#F90;
    font-weight:bold;
    float:left;
}

.homePrize {
    font-size:14px;
    color:#000;
    float:right;
}

.homePrizes:hover {
    background-color:#FC6;
}

Thanks!

Answer 1

Since .homePrizes has no content that isn't floating, doesn't have an explicit height, and doesn't apply any of the techniques for containing floats:

The container has a height of 0. As a result, there is no area for the pointer to hover over, and no visible space to have a background colour.

Change to:

.homePrizes {
    clear:both;
    width:100%;
    line-height:30px;
    overflow: hidden;
}

That said, since it is non-interactive, adding a hover effect would send the wrong signals the user. That sort of colour change shouts click me at the user.

Answer 2

Try this:

.homePrizes {
    clear:both;
    width:100%;
    line-height:30px;
    overflow:hidden;
}

You need to add overflow:hidden to the parent div to expand its height and cover the children divs