SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Addict Synaesthesiac's Avatar
    Join Date
    Aug 2004
    Posts
    359
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Table cell border color changes on hover?

    I'm not sure if I've ever seen this done before, but I'm sure it can be done.

    I want to create a td class that will allow the border color to change when the user's mouse hovers over the table cell.

    I'm using the following for border style:

    border: 10px solid #e6e6e6

    Anyone know how this can be done?
    Danielion
    Imagine a world without hypothetical scenarios...

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Code:
    td {
      border: 10px solid #e6e6e6;
    }
    td:hover {
      border-color: red;
    }
    If you want it to work in IE though, you'll have to add some scripting.

  3. #3
    SitePoint Addict Synaesthesiac's Avatar
    Join Date
    Aug 2004
    Posts
    359
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    If you want it to work in IE though, you'll have to add some scripting.
    Well, I think that goes without saying... what kind of scripting?
    Danielion
    Imagine a world without hypothetical scenarios...

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Javascript. Or voodoo, but that doesn't work well in browsers

    Seriously though, something like this would work in all browsers that understand CSS and scripting:
    HTML Code:
    <td style="border: 10px solid #e6e6e6;" onmouseover="this.style.borderColor='red';" onmouseout="this.style.borderColor='#e6e6e6';">My weird hovering table cell.</td>

  5. #5
    SitePoint Addict Synaesthesiac's Avatar
    Join Date
    Aug 2004
    Posts
    359
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh, the javascript worked like a charm.

    But I couldn't get the CSS version to work, even in Firefox...?
    Danielion
    Imagine a world without hypothetical scenarios...

  6. #6
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    Location
    Relative
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Overkill, but related:

    http://dean.edwards.name/IE7/
    Of course, that's just my opinion. I could be wrong.

  7. #7
    SitePoint Wizard subnet_rx's Avatar
    Join Date
    Aug 2001
    Location
    Hattiesburg, MS
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can this work on div's too?

  8. #8
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    Location
    Relative
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In non-IE browsers such as Firefox and Opera, yes.

    But IE only supports :hover in anchor-tags. However, follow the link in my previous post for a JavaScript solution that gives IE almost full CSS2 support, including the ability to have :hover on any element.
    Of course, that's just my opinion. I could be wrong.


Bookmarks

Posting Permissions

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