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

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

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

如果你真的希望这两个盒子完全相同，你也需要覆盖未悬停的按钮：

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

值得指出的是，IE6仅支持:hover元素上的a伪类。您可以通过将a设置为display: block并在其中添加背景颜色来解决此问题。

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

Answer 2

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

Answer 3

Like this?

.btn:hover a{
    color:red;   
}

Answer 4

更改为：

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

http://jsfiddle.net/vaNJD/4/

Answer 5

我找到了一种方法，你应该为div标签设置高度，并再次使用它作为锚标签，并将锚点的显示属性设置为块例如

<style>
.divest
{
height:120px;
}
.divest a
{
display:block;
height:120px;
}
</style>
<div class="divest"><a href="#">here is hyperlink text</a></div>

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

5 个答案: