PDA

View Full Version : td:hover?

BroChris
06-30-2002, 02:18 AM
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.
jkd
06-30-2002, 03:19 AM
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.
Gordo
06-30-2002, 05:32 AM
For more detailed instructions and cross-browser, see this page...

http://wsabstract.com/javatutors/crossmenu3.shtml
redhead
06-30-2002, 09:30 AM
this method is what i use:


<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 :thumbsup:
premshree
06-30-2002, 08:19 PM
Check this URL :
http://www.geocities.com/e_i_search/premshree/web-include/pub/articles/index.htm
vova7777
09-09-2007, 09:42 PM
this method is what i use:
Hope this helps, happy coding :thumbsup:
this wont help, "onmouseoff" does not exists! It should be "onmouseout"

<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>
rainntears
04-23-2008, 08:48 AM
this is helpfull ^^, I've been looking for this code for a long time.^^