Question

I have the following html snippet:

<a href="page1.aspx" class="title">page title goes here</a><br />
<span class="username">username goes here: </span><span class="dateandtime">date the time go here</span>

Here is the css for these classes

.title
{
    color:#707070;
}

.username
{
    color:#8DAAB8;
}

.dateandtime
{
    color:#A5A7AC;
}

Is it possible to change the colors of these 3 items when hovering over the title?

The colors I want the items to change to are as follows

title = 000000
username = DF821B
dateandtime = 3185B6

Not sure if this is possible with css, if the html snippet structure needs to change, that will not be a problem.

I know this can be done with javascript, but wanted to know if it is possible without javascript.

Answer 1

Not totally clear on the question — do you want each of them to have their own hover colour, or do you want all three to change colour at once, when you hover on any of them?

In the first case, it’s easy: just add a :hover style for each of the three elements (you already have answers to this effect, so I won’t repeat them here).

In the second case, you’ll need a container element that would take the hover, so your code would look like this:

<span class='container'>
    <a href="page1.aspx" class="title">page title goes here</a><br />
    <span class="username">username goes here: </span><span class="dateandtime">date the time go here</span>
</span>

(you may want to use <div> rather than <span>, but I’ll leave that up to you)

Your CSS would then look like this:

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

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

Obviously, change the colours in the new styles to whatever you want them to be. If all three should be the same, then you could simplify the three new styles down to something like this:

.container:hover span, .container:hover a, {color:#000000;}

Hope that helps.

One final thing to note: IE6 and below do not support the :hover style on anything except <a> elements. My recommendation to you is simply not to support IE6 for your site (there are plenty of other things broken in IE6 too), but if you do need to support it, there are hacks available to get :hover to work with it. See Whatever:Hover.