CODEWITHSUNDEEP
htmlcss
user613326
user613326

Reputation: 2180

Change font color and background in html on mouseover

I'm using a small piece of inline HTML code to change the background of a cell color in a table on mouse hover. I use this on specific table cells only, so not all cells need this to happen.

<td  bgcolor="#000000" onmouseover="this.bgColor='white'" onmouseout="this.bgColor='black'"  >

This works nicely, but I would also like to change the font color.

So that it by default is a black cell with white text

But on mouseover the bgcolor is white and the text is black, how should I do that ?

Upvotes: 3

Views: 116511

Answers (4)

Rohil_PHPBeginner
Rohil_PHPBeginner

Reputation: 6080

td:hover{ 
background-color:red;
color:white;
}

I think this is what are you looking for.

Upvotes: 0

Sachin
Sachin

Reputation: 40970

It would be great if you use :hover pseudo class over the onmouseover event

td:hover
{
   background-color:white
}

and for the default styling just use

td
{
  background-color:black
}

As you want to use these styling not over all the td elements then you need to specify the class to those elements and add styling to that class like this

.customTD
{
   background-color:black
}
.customTD:hover
{
  background-color:white;
}

You can also use :nth-child selector to select the td elements

Upvotes: 14

Maen
Maen

Reputation: 10698

You'd better use CSS for this:

td{
    background-color:black;
    color:white;
}
td:hover{
    background-color:white;
    color:black;
}

If you want to use these styles for only a specific set of elements, you should give your td a class (or an ID, if it's the only element which'll have that style).

Example :

HTML

<td class="whiteHover"></td>

CSS

.whiteHover{
    /* Same style as above */
}

Here's a reference on MDN for :hover pseudo class.

Upvotes: 2

dljve
dljve

Reputation: 545

Either do it with CSS like the other answers did or change the text style color directly via the onMouseOver and onMouseOut event:

onmouseover="this.bgColor='white'; this.style.color='black'"

onmouseout="this.bgColor='black'; this.style.color='white'"

Upvotes: 12

Related Questions