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.^^