Background Mouseover Change Color


I have a background within two divs which I am trying to change color on mouseover. So when people mouseover the background changes colour but the text remains the same colour.

Does anyone know how to do this please?

justlukeyou was the OP. I was trying to help him figure it out. It sounded to me like he was wanting to work with a particular cell of a table.

You’re HTML is obviously much better, I just wanted to see if I could do it. I think my third post might have worked although it wasn’t exactly what you did.

I’ve learned from you’re post however, thank you.

Are you working with divs or with tables? I wouldn’t advise to place a table within a div. If you just work with tables the priciple stays the same as mentioned above:


.tdname {
	background: #FF0000;	

.tdname:hover {
	background: #0000FF;	


<td class="tdname">Content</td>

Can you put a particular cell within a div?

    background: #0000FF
    background: #FF0000

Ok, I just started HTML myself so I’m not sure if I’ve got it right or not. But this might be what you are looking for:

In the HTML:

<p><span class="hover">
Hello World!</span>



In you’re CSS:

span:hover .hover
    text-decoration: none;
    background-color: White;

You would want to name the class something other than hover though I would think. That is probably bad naming practice, but I just threw that in the middle of a .css file I’m working on to try it out. Adjust the colors to you’re liking. Hope that works! Let me know, I need some confidence, just started practicing this stuff a week or so ago.

Thanks, what would work for a cell and do I apply it to the HTML?

I believe this should work in your .css file:

text-decoration: none;
color: White;
background-color: Navy;

Well, that would work for a link. Didn’t read you’re post as careful as I should have.