Hover issue on DIV (css)

Question

I am trying to do a really simple button using a div. Everything's fine, except that when the mouse cursor goes over the button, the text is supposed to turn black, and the background-color white...But currently, I have to put the mouse cursor over the text to see it turn black.

Here's my CSS code :

.pledges_boutons {
    width: 157px;
    color: #fff;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 11px;
    height: 18px;
    text-align: center;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-decoration: none;
    display: block;
    background-color: #868686;
    }

and Hover :

.pledges_boutons:hover {
    color: #000;
    cursor: pointer;
    background-color: #fff;
}

HTML:

<div class="pledges_boutons">
   <a href="http://www.google.com">Click here</a>
</div>

Here's my fiddle

Thank you!

Please include your HTML in the question. Do not rely on jsFiddle demo for that. Edited. — Sparky
– Sparky, Commented Sep 28, 2012 at 17:33

Giona · Accepted Answer · 2012-09-28 17:29:43Z

8

Replace:

.pledges_boutons:hover {

With:

.pledges_boutons:hover, .pledges_boutons:hover a {

That will do the trick ;-)

answered Sep 28, 2012 at 17:29

Giona

21.2k5 gold badges60 silver badges68 bronze badges

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

Comments

Tim M. · Accepted Answer · 2012-09-28 17:30:22Z

3

There are a variety of ways to handle this, but essentially you need to provide a specific enough selector to override the style of the anchor when the parent is hovered.

Example: http://jsfiddle.net/6JCWn/1/

.pledges_boutons:hover a {
    color: #000;
}

answered Sep 28, 2012 at 17:30

Tim M.

54.5k14 gold badges126 silver badges167 bronze badges

Comments

Jackie · Accepted Answer · 2012-09-28 17:32:46Z

1

It's because you are specifically styling the link to be white:

.pledges_boutons a:link {
    text-decoration:none;
    color:#fff;
}

The link is styled white using a selector that is more specific than:

.pledges_boutons:hover {
    color: #000;
    cursor: pointer;
    background-color: #fff;
}

So what you want to do is change it to

.pledges_boutons:hover,
.pledges_boutons:hover a {
    color: #000;
    cursor: pointer;
    background-color: #fff;
}

Once you do that, you can remove the rule directly above it, since it will be made redundant:

.pledges_boutons a:hover {
    color:#000;
    background-color:white;
}

answered Sep 28, 2012 at 17:32

Jackie

1,6502 gold badges15 silver badges12 bronze badges

Comments

Martijn Pieters · Accepted Answer · 2012-09-28 17:34:50Z

-1

ctrl+F5 clears the browser page cache; the browser caches css files.

edited Sep 28, 2012 at 17:34

Martijn Pieters

1.1m326 gold badges4.2k silver badges3.4k bronze badges

answered Sep 28, 2012 at 17:31

DarkThanos

1224 bronze badges

Collectives™ on Stack Overflow

Hover issue on DIV (css)

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

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

Related