Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: td:hover?

  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Louisville, KY
    Posts
    279
    Thanks
    0
    Thanked 0 Times in 0 Posts

    td:hover?

    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.

  • #2
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    TEXAS . . . 'nuf said
    Posts
    468
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For more detailed instructions and cross-browser, see this page...

    http://wsabstract.com/javatutors/crossmenu3.shtml
    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)

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Mumbai, India
    Posts
    218
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #6
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Quote Originally Posted by redhead View Post
    this method is what i use:
    Hope this helps, happy coding
    this wont help, "onmouseoff" does not exists! It should be "onmouseout"
    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>

  • #7
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    this is helpfull ^^, I've been looking for this code for a long time.^^


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •