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!

It is because of the floats, .homePrizes does not take up any space. You have to manually set a height for .homePrizes or align it differently. — Tom
– Tom, Commented Feb 20, 2011 at 15:58

Quentin · Accepted Answer · 2011-02-20 18:14:41Z

9

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.

edited Feb 20, 2011 at 18:14

answered Feb 20, 2011 at 15:58

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CodeOverload · Accepted Answer · 2011-02-20 15:57:48Z

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

answered Feb 20, 2011 at 15:57

CodeOverload

48.8k56 gold badges135 silver badges225 bronze badges

Comments

xandy · Accepted Answer · 2011-02-20 15:59:21Z

1

Add overflow:auto; to .homePrizes will work.

Reason: The child of .homeprizes are all float, that leads to the browser consider that to be 0 height element. Adding overflow:auto will fix it.

answered Feb 20, 2011 at 15:59

xandy

27.4k8 gold badges61 silver badges66 bronze badges

Comments

Otroberts · Accepted Answer · 2011-04-29 12:48:19Z

0

All you need is a quick edit to:

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

Good luck!

answered Apr 29, 2011 at 12:48

Otroberts

3471 gold badge4 silver badges7 bronze badges

Collectives™ on Stack Overflow

CSS change background color on hover

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related