CSS更改悬停时的背景色

为什么这不起作用

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

谢谢

试试这个：

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

---

您需要将

溢出：隐藏
添加到父div以扩展其高度并覆盖子div
，因为
。HomePrives
没有不浮动的内容，没有明确的高度，并且不应用以下任何内容：

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

改为：

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

也就是说，由于它是非交互式的，添加悬停效果会向用户发送错误的信号。这种颜色变化会在用户面前大声叫“单击我”。
添加
溢出：自动到。家庭奖品将起作用

原因:
家庭的孩子都是漂浮的，这导致浏览器认为是0个高度元素。添加溢出：自动将修复它。
您只需快速编辑即可：

.home奖品{
明确：两者皆有；
宽度：100%；
线高：30px；
溢出：隐藏；
}

祝你好运
 这是因为浮动，
。Home奖品
不会占用任何空间。您必须手动设置
.home
的高度或以不同方式对齐。
.homePrizes {
    clear:both;
    width:100%;
    line-height:30px;
    overflow: hidden;
}