hover td onmouseover using css

i have the following onmouseover code that changes the background color of the second td when the mouse is put on top. however, what i wanted to do was apply the onmouseover rule to both td's when the mouse is put over either one, then both of the td's should change color.

can anyone please tell me how i can do this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>cell color changer</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <style type="text/css"> /*<![CDATA[*/ body { background:#aaaaaa; } #container { width:500px; margin:auto; } #tbl { background:#ffffff; border:solid 1px #000000; } .cell { width:100px; height:100px; border:solid 1px #000000; } /*//]]>*/ </style> <script type="text/javascript"> //<![CDATA[ function changeCell(el) { cell=document.getElementsByTagName('td'); for(c=0;c<cell.length;c++) { cell[c].style.background="#ff0000"; } el.onmouseout=function() { for(c=0;c<cell.length;c++) { cell[c].style.background="#ffffff"; } } } //]]> </script> </head> <body> <div id="container"> <table id="tbl"><tr> <td class="cell" onmouseover= "changeCell(this)"> </td> <td class="cell" onmouseover= "changeCell(this)"> </td> <td class="cell" onmouseover= "changeCell(this)"> </td> <td class="cell" onmouseover= "changeCell(this)"> </td> <td class="cell" onmouseover= "changeCell(this)"> </td> </tr><tr> <td class="cell" onmouseover= "changeCell(this)"> </td> <td class="cell" onmouseover= "changeCell(this)"> </td> <td class="cell" onmouseover= "changeCell(this)"> </td> <td class="cell" onmouseover= "changeCell(this)"> </td> <td class="cell" onmouseover= "changeCell(this)"> </td> </tr><tr> <td class="cell" onmouseover= "changeCell(this)"> </td> <td class="cell" onmouseover= "changeCell(this)"> </td> <td class="cell" onmouseover= "changeCell(this)"> </td> <td class="cell" onmouseover= "changeCell(this)"> </td> <td class="cell" onmouseover= "changeCell(this)"> </td> </tr></table> </div>

</body> </html>

hover td onmouseover using css

lindajames

birdbrain

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week