停留在div上的CSS不会影响位于内部的锚点？

Question

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

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

很好地工作.但是,如果我们有:

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

它不会像第一个完全一样.锚点的文本不会受到影响.好的,如果我们添加到CSS:

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

这将有效,但只有当你完全悬停在锚点上,但仍悬停在div矩形上时不会影响锚点的文本.

我怎么能在没有任何javascript的情况下调整它,所以两个矩形的行为相同？

http://jsfiddle.net/vaNJD/

UPD:添加!important关键字无济于事

Answer 1

由于所有 Web 浏览器都为元素设置了默认值color（和text-decoration）a，因此您需要一个更具体的选择器来覆盖默认值。试试这个：

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

如果您真的希望两个框相同，您还需要覆盖未悬停的按钮：

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

值得指出的是，IE6 仅支持元素:hover上的伪类a。您可能希望通过设置atodisplay: block并在那里添加背景颜色来解决此问题。

您可以通过摆脱容器并将.btn类直接应用于a元素来实现相同的效果。请参阅此更新小提琴中的第三个框：http : //jsfiddle.net/mlms13/vaNJD/5/