Tweet
I've seen people do this kind of thing before, but I never looked at their source. How do I make a table cell change color onmouseover? I'm thinking it's as simple as css, but I could be wrong.
-
In a standards-compliant browser, td:hover works fine.
Currently, it seems only Gecko browsers (NS6, NS7, Mozilla, Beonex, K-meleon, Galeon - to name a few) support this CSS selector on more than a elements. I'm not sure on Opera 6's support of it.
Since IE refuses to implement any new, useful standards, and since so little people use Gecko, you have to do it the old, longwinded way:
<td onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='white'">
For example. You can achieve similar effects in NS4 by using nested <ilayer><layer> combinations, and can change any CSS proprety this way too.
Some people write functions to shorten it up some more, but it still nearly isn't as obvious as td:hover
.
Maybe IE7... or maybe not. -
For more detailed instructions and cross-browser, see this page...
Gordo
"In the End, we will remember not the words of our enemies, but the silence of our friends."
- Martin Luther King Jr. (1929-1968)Comment
-
this method is what i use:
Code:<style> td.navon { background-color: #999999; cursor: hand} td.navoff { background-color: #FFFFFF} </style> <table> <tr> <td class="navoff" onmouseover="className='navon'" onmouseoff="className='navoff'"> td 1 </td> </tr> <tr> <td class="navoff" onmouseover="className='navon'" onmouseoff="className='navoff'"> td 2 </td> </tr> </table>
Hope this helps, happy coding
redhead
Comment
-
this wont help, "onmouseoff" does not exists! It should be "onmouseout"Originally posted by redhead View Postthis method is what i use:
Hope this helps, happy coding
Code:<head> <title>Untitled Document</title> <style> td.navon { background-color: #999999; cursor: hand} td.navoff { background-color: #FFFFFF; cursor: hand} </style> </head> <body> <table> <tr> <td class="navoff" onmouseover="className='navon'" onmouseout="className='navoff'"> tddsd 1 </td> </tr> <tr> <td class="navoff" onmouseover="className='navon'" onmouseout="className='navoff'"> td 2 </td> </tr> </table> </body> </html>Comment
-
this is helpfull ^^, I've been looking for this code for a long time.^^Comment
Comment