changing html text colors with css - html

Question

I have the following html snippet:
page title goes here<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

Use the :hover pseudoclass:
.title:hover
{
color: #000000;
}
etc. This works in all browsers, except in IE6 and earlier, which doesn't support :hover on anything other than hyperlinks (A elements).
Edit 1: I see you want to change them all while hovering over the title. In that case, it becomes a little more complicated. You should put a <div> around it and apply the :hover pseudoclass on that. It won't just be the title (which is also possible, but has even less chance of working in IE). For that:
<div class="someclass">Title<span class="username">username</span><span class="dateandtime">date and time</span></div>
is your HTML, but your CSS would be:
.someclass .title:hover { color: #000000; }
.someclass .title:hover ~ .username { color: #DF821B; }
.someclass .title:hover ~ .dateandtime { color: #3185B6; }
Where ~ is the sibling selector (meaning it should have the same parent (.someclass) as the .title:hover).
#Harry Joy: No, it's not. My answer is different, not to mention I don't have enough rep to post comments.
Edit 2:
As requested, to make them all change while hovering over the entire container, use the above HTML with the following CSS:
.someclass:hover .title { color: #000000; }
.someclass:hover .username { color: #DF821B; }
.someclass:hover .dateandtime { color: #3185B6; }
(though basically credit for that goes to Spudley for suggesting it first).

Answer 2

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'>
page title goes here<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.

Answer 3

It's definitely possible, just append this to your CSS:
.title:hover
{
color:#000000;
}
.username:hover
{
color:#DF821B;
}
.dateandtime:hover
{
color:#3185B6;
}
This called a pseudo-class and will make your anchors change color when hovered )
Edit:
At first I misunderstood your question, this isn't the solution!
You can't do this in CSS alone, but you can do it jQuery easily!
Here's an example.
What you need to do is set up a class for each of the hovered states, then use jQuery to replace add a class that will change the colors as you want :)
You just have to include the jQuery framework if you haven't already:
In the <head>:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

Answer 4

Well you could do this one of two ways but not with CSS, you can either add and remove the appropriate classes (unobtrusive JavaScript) or change the styles directly. For instance:
document.getElementById('someElement').style.color = '#FF0000';
Or you can use a JavaScript library such as jQuery.
jQuery('p.someClass').mouseOver(function(e) {
e.target.style.color = '#FF0000';
})
.mouseOut(function(e) {
e.target.style.color = '#000000';
});