changing html text with css part 2

I have the following css from another question:

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

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

This works ok as long as I have the following html (the following is just a snippet)

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

How do I get it to work on individual containers? The html is dynamically generated via serverside code.

For example:

<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&l开发者_StackOverflowt;/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>

Using the above css, if I hover over anyone of these containers, it ends up changing the colors of all containers. It should change the color of just the items within the container which is being hovered over.

How can this be done?

Your code (as shown in the question) should work just fine.

Most likely you have another div that is wrapping all of them that also has the container class. (forgetting to close the div would have the same effect)

Your working code live at http://jsfiddle.net/2TnKr/

Yeah, your code works "fine". Just be aware that the behavior of :hover on an HTML entity that is not an anchor tag can vary widely from browser to browser.