CSS hover on div doesn't affect anchor that sits inside?

Question

<style>
      .btn{
           display: inline-block;
           padding: 15px 10px;
           background: gray;
       }
      .btn:hover{
             background:lightgray;
             color:red;
      }
</style>

<div class="btn"> 
   text
</div>

works nicely. However if we have that:

<div class="btn"> 
  <a href="#">text</a>
</div>

it wouldn't work exactly as the first one. The anchor's text wouldn't be affected. Okay what if we add to the CSS:

.btn a:hover{
    background:lightgray;
   color:red;
 }

That will work, but only if you hover exactly on the anchor, but still hover on the div rectangle wouldn't affect the anchor's text.

How can I tweak that without any javascript, so both rectangles acted identically?

http://jsfiddle.net/vaNJD/

UPD: adding !important keyword wouldn't help

Answer 1

Because all web browsers set a default color (and text-decoration) for a elements, you need a more specific selector to override the default. Try this instead:

.btn:hover, .btn:hover a {
    background:lightgray;
    color:red;
}

If you really want the two boxes to be identical, you would also need to override the un-hovered button as well:

.btn a {
    color: black;
    text-decoration: none;
}

It may also be worth pointing out that IE6 only supports the :hover pseudo-class on a elements. You may want to work around this by setting the a to display: block and adding the background color there.

You can accomplish the same effect by getting rid of the container and applying the .btn class directly to the a element. See the third box in this updated fiddle: http://jsfiddle.net/mlms13/vaNJD/5/

Answer 2

     .btn:hover{
             background:lightgray;
             color:red;
      }
      .btn:hover a{
        color: red;
      }