同懸停效果

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. :)