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 没有不 float 的内容，没有明确的高度，并且不应用任何 techniques for containing floats :

容器的高度为 0。因此，没有可供指针悬停的区域，也没有可见的空间来设置背景颜色。

更改为:

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

也就是说，由于它是非交互式的，添加悬停效果会向用户发送错误的信号。这种颜色变化会向用户大喊点击我。