CSS在悬停时更改背景颜色

Question

为什么这不起作用？

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

谢谢!

Answer 1

由于.homePrizes没有没有浮动的内容,没有明确的高度,并且不应用任何包含浮点数的技术:

容器的高度为0.因此,没有指针悬停的区域,也没有可见空间来显示背景颜色.

改成:

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

也就是说,由于它是非交互式的,因此添加悬停效果会向用户发送错误的信号.那种颜色变化喊叫用户点击我.