Background Mouseover Change Color

Get Started
1

Hi,

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?

2

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.

3

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:

CSS


.tdname {
	background: #FF0000;	
}

.tdname:hover {
	background: #0000FF;	
}

HTML


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

Can you put a particular cell within a div?

5 

#divName{
    background: #0000FF
}
#divName:hover{
    background: #FF0000
}
6

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:


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

</td>
</tr>

</table>

In you’re CSS:


span:hover .hover
{
    text-decoration: none;
    color:Navy;
    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.

7

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

8

I believe this should work in your .css file:

a:hover
{
text-decoration: none;
color: White;
background-color: Navy;
}

9

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