Changing The Color Of A Cell In A Html Table When I Hover Over It

I have looked through all the answers posted but I cant seem to get this code to work correctly. I am trying to get the individual cell to change color when I hover over it, but I

Solution 1:

In CSS:

td:hover {
  background-color: #ff0000;
  color: #000000;
}

Or you can use JavaScript/jQuery:

$(document).ready(function() {
  $("td").hover(
    function() {
      $(this).css('background-color', '#ff0000');
      $(this).css('color', '#000000');
    }, 
    function() {
      $(this).css('background-color', 'none');
      $(this).css('color', 'black'); // or whatever your original color was
    }
  );
});

Solution 2:

Wrap the cell data with a div (class="cell_hvr") and a link around the content.

.cell_hvr {
    padding: 2px;
    width: 100%;
    height: 100%;
}
.cell_hvr a {
    display: block;
    text-decoration: none;
}
.cell_hvr a:hover {
    background-color: red;
}

<divclass="cell_hvr"><ahref="#"target="_blank"> (Your content) </a></div>

Solution 3:

You can do this by giving each cell a class

<tdclass="a">..</td>

and then styling it

<style>td.a { background-color:#ff0000; }
  td.a:hover { background-color:#000000; }
</style>

Solution 4:

CSS: td:hover, th:hover { background:#ff0000; color:#000; }

Solution 5:

I was looking for the JavaScript version of the answer to this question. But, I am not using JQuery..

I have oCell = newRow.insertCell(); oCell.style.background = tintTest(myCounts[i]);

myCounts is just an array holding an Int..

but now i just wanted to add the hover background color to my current oCell before smashing it in line and moving on with the loop...... So I found the code below as the only checked answer in a stream of 'can't be done'.. just not sure if this would even help me.

var css = 'table td:hover{ background-color: #00ff00 }';
var style = document.createElement('style');

if (style.styleSheet) {
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}

document.getElementsByTagName('head')[0].appendChild(style);

EDIT!!! I just found out my issue (I hope the code snip helps with yours still) I tried to add the hover in CSS and it just isn't supported at all.