Geek Answers Handbook

Change cell color in html table when hovering over it

I looked through all the posted answers, but I can't seem to get this code to work correctly. I am trying to get a single cell to change color when I hover over it, but I do not have access to .css with the service we use. I am forced to remove the HTML code field so that I can insert my code into a specific element that I am editing, but not the entire .css file ... only this element.

Here is my code. We would be very grateful for any help in changing the background to # ff0000 and the text to # 000000 when I flip the cell.

(Ultimately, I intend to add a> href for each of the cells, but I'm trying to do this one step at a time.> Href (hopefully) will add the selected cell to the shopping cart ..)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"> <title></title> <style type="text/css"> body { background: #000; } #wrap { margin: 0 auto; /* margin 0 auto will center that box in your document */ width: 780px; /*size of your box*/ background: #000; text-align: center; /* everything will be written in that box will be centered horizontally*/ } </style> <div id="wrap"> <table width="780"> <tr> <td align="center"> <table border=1> <tbody> <!-- Results table headers --> <tr> <th>Messages Per Month</th> <th>1 Month Pricing</th> <th>3 Month Pricing</th> <th>12 Month Pricing</th> </tr> <tr> <td>500</td> <td>$14.95/Month</td> <td>$12.95/Month</td> <td>$9.95/Month</td> </tr> <tr> <td>1,000</td> <td>$24.95/Month</td> <td>$20.95/Month</td> <td>$17.95/Month</td> </tr> <tr> <td>1,500</td> <td>$37.95/Month</td> <td>$31.95/Month</td> <td>$26.95/Month</td> </tr> <tr> <td>2,000</td> <td>$49.95/Month</td> <td>$41.95/Month</td> <td>$35.95/Month</td> </tr> <tr> <td>2,500</td> <td>$62.95/Month</td> <td>$52.95/Month</td> <td>$44.95/Month</td> </tr> <tr> <td>5,000</td> <td>$119.95/Month</td> <td>Not Available</td> <td>Not Available</td> </tr> <tr> <td>7,500</td> <td>$179.95/Month</td> <td>Not Available</td> <td>Not Available</td> </tr> <tr> <td>10,000</td> <td>$219.95/Month</td> <td>Not Available</td> <td>Not Available</td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </td> </tr> </table> </div>
+4
source share
5 answers

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 } ); });
+9
source

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; } <div class="cell_hvr"><a href="#" target="_blank"> (Your content) </a></div>
+1
source

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

0
source

You can do this by giving each cell a class

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

and then style

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

I was looking for a version of the answer to this question in JavaScript. But I do not use jQuery ..

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

myCounts is just an array containing Int ..

but now I just wanted to add the background color to my current oCell before breaking it into a line and moving on with the loop ...... Therefore, I found the code below as the only verified answer in the “cannot be done” thread .. just not sure if this will 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);

CHANGE !!! I just found out about my problem (I hope the snapshot will help you as before) I tried to add hover in CSS and it just isn't supported at all.

0
source

More articles:


All Articles