Question

我有以下HTML：

<a href="">Bioshock 2<span> - Xbox 360 review</span></a>

我想以一种方式设置链接的第一部分，将span设置为另一种方式，如下所示：

Example http://i48.tinypic.com/bc6k6.jpg

我设法使用以下CSS设法：

a {
    text-decoration: none;
}

a span {
    color: #c8c8c8;
}

a:link, 
a:visited {
    color: #787878;
}

a:hover,
a:active {
    color: #fff;
    background-color: #a10000;
}

但是，当我将鼠标悬停在它上面时，它无法正常工作：

Example http://i47.tinypic.com/1rc8er.jpg

我希望整个链接具有相同的悬停效果，而不是让span保持其颜色。无论你是在span还是在链接的其余部分上空盘旋，我都会喜欢这种情况。期望的效果如下所示：

Example http://i46.tinypic.com/1h9u6h.jpg

我有什么想法可以做到这一点？

Answer 1

尝试：

a:hover, a:active, a:hover span {
  // ...
}

而不是：

a:hover, a:active {
  // ...
}

Answer 2

将此css代码添加到其中：

a span:hover {
      color: #fff;
      background-color: #a10000;
}

<强> And here is the demonstration. :)

CSS中所有链接子项的悬停效果相同

2 个答案: