同悬停效果

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 { 
    // ... 
} 

Answer 2

添加这个CSS代码到它：的

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

代替：

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

And here is the demonstration. :)