Web Analytics Made Easy -
StatCounter td:hover? - CodingForum

Announcement

Collapse
No announcement yet.

td:hover?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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.
    designsbychris.com

  • #2
    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.
    jasonkarldavis.com

    Comment


    • #3
      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)

      Comment


      • #4
        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


        • #5
          Check this URL :
          http://www.geocities.com/e_i_search/...cles/index.htm
          Scripting | JavaScripts | PerlScripts | Python Scripts | Articles | My Journal

          Comment


          • #6
            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>

            Comment


            • #7
              this is helpfull ^^, I've been looking for this code for a long time.^^

              Comment

              Working...
              X