使用CSS部分改变HTML文本2

Question

我从另一个问题下面的CSS：

.title {color:#707070;} 
.username {color:#8DAAB8;} 
.dateandtime {color:#A5A7AC;} 

.container:hover .title { color: #000000; } 
.container:hover .username { color: #DF821B; } 
.container:hover .dateandtime { color: #3185B6; } 

这，只要我有以下的HTML工作正常（以下仅仅是一个片断）

<div class="container"> 
    <a href="#" class="title">Title</a> 
    <span class="username">username</span> 
    <span class="dateandtime">date and time</span> 
</div> 

如何让它在单个容器上工作？ html是通过服务器端代码动态生成的。

例如：

<div class="container"> 
    <a href="#" class="title">Title1</a> 
    <span class="username">username1</span> 
    <span class="dateandtime">date and time1</span> 
</div> 

<div class="container"> 
    <a href="#" class="title">Title2</a> 
    <span class="username">username2</span> 
    <span class="dateandtime">date and time2</span> 
</div> 

<div class="container"> 
    <a href="#" class="title">Title3</a> 
    <span class="username">username3</span> 
    <span class="dateandtime">date and time3</span> 
</div> 

<div class="container"> 
    <a href="#" class="title">Title4</a> 
    <span class="username">username4</span> 
    <span class="dateandtime">date and time4</span> 
</div> 

使用上述CSS，如果我悬停在这些容器中的任何一个，它结束了所有改变容器的颜色。它应该改变正在悬停的容器内的物品的颜色。

这怎么办？

Answer 1

您的代码（，如问题中所示）应该可以正常工作。

最有可能你有另一个div，它们都包含所有这些也有container类。 （忘记关闭的div将有同样的效果）

你的工作代码住在http://jsfiddle.net/2TnKr/

Answer 2

呀，你的代码工作“细”。请注意，悬停在不是锚标签的HTML实体上的行为在浏览器和浏览器之间可能会有很大差异。