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没有未浮动的内容，因此没有明确的高度，并且不会应用任何techniques for containing floats：

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

更改为：

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

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

Answer 2

试试这个：

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

您需要将overflow:hidden添加到父div以扩展其高度并覆盖子div

Answer 3

将overflow:auto;添加到.homePriz可行。

原因： .homeprizes的孩子都是浮动的，导致浏览器认为是0高度元素。添加溢出：auto会修复它。

Answer 4

您只需快速编辑即可：

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

祝你好运！

CSS在悬停时更改背景颜色

4 个答案: