SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    using css to change bg of <td> on hover?

    Hi everyone...

    Since CSS can do just about anything - I'm curious if it is possible to change a cell background color on hover of a link?

    I hope you understand...

    I have a table with 8 vertical cells with options... each option in its own cell... when i rollover the text link is it possible to change the bgcolor of the cell?

    thanks in advance
    ~nina

  2. #2
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nina...

    Put this code in your TD:
    onMouseOver="this.bgColor = '#F0F0F0'" onMouseOut="this.bgColor = '#FFFFFF'"

    Change the colors to whatever you like.

    The final code would look like this:
    <td onMouseOver="this.bgColor = '#F0F0F0'" onMouseOut="this.bgColor = '#FFFFFF'">
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  3. #3
    SitePoint Zealot 19nine78's Avatar
    Join Date
    Feb 2002
    Location
    Ayr, scotland
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    depends on your browser

    mozilla (and probably NS6) should let you do this:

    in you stylesheet

    td.myclass:hover{
    background-color:#ff0000
    }

    them any td with the classname 'myclass' will change to red when hovered over

    It doesn't work in IE6 or opera6 on the PC.

    If your options are links though you may find this useful:using CSS to create rollovers which might help you re-create what you need.

    [edit]
    or use creoles suggestion, it'll work but it's not *pure* css

    cheers

    alastair
    Last edited by 19nine78; May 29, 2002 at 09:19.

  4. #4
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that was fast!
    now time to play i guess

    thank you bunches

    ~nina

  5. #5
    SitePoint Enthusiast Clampants's Avatar
    Join Date
    Apr 2002
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was *just* looking for this, and here is a quick and drity version I found:

    http://www.bravenet.com/reviews/arch...ps.php?view=83

    Granted, it isn't cross-browser compatible (doesn't work in Netscape), so I am still looking for something that works across browser or at least degrades gracefully.

    Tim
    http://www.fivesevenfive.com

  6. #6
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    for some reason the style sheet way isn't working...

    i added it to my stylesheet... saved it.. made sure its linked.

    then i went to the cell i want to alter and <td class='myclass'>

    did i do something wrong?

    ~nina

  7. #7
    Non-Member mmi's Avatar
    Join Date
    Jun 2001
    Location
    Rhode Island
    Posts
    587
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this should work in both IE and NS
    Code:
    <style type="text/css"><!--
    
    a:hover {color: #ff0000}
    
    --></style>
    
    <table>
    
     <tr>
    
      <td onMouseover="this.style.backgroundColor='yellow'" 
      onMouseout="this.style.backgroundColor='white'">
    
      <ilayer><layer onMouseover="this.bgColor='yellow'" 
      onMouseout="this.bgColor='white'"><a href="#">Main</a></ilayer></layer></td>
     
     </tr>
    
    </table>
    Last edited by mmi; May 29, 2002 at 10:17.

  8. #8
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    -= Use SPAN (or DIV) instead of layer.
    -= ilayer is not a valid HTML tag and to be honest, neither is layer. They are both put off in favor of a DIV as a container tag.
    -= Make sure your tags are nested correctly.

    But other than that the code worked great.
    Last edited by creole; May 29, 2002 at 15:53.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  9. #9
    Non-Member mmi's Avatar
    Join Date
    Jun 2001
    Location
    Rhode Island
    Posts
    587
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks creole - how can I change this to get the bgcolor change in N4?
    Code:
    <style type="text/css"><!--
    
    a:hover {color: #ff0000}
    
    --></style>
    
    <table>
    
     <tr>
    
      <td onMouseover="this.style.backgroundColor='yellow'" 
      onMouseout="this.style.backgroundColor='white'">
    
      <div><span onMouseover="this.bgColor='yellow'" 
      onMouseout="this.bgColor='white'"><a href="#">Main</a></span></div></td>
     
     </tr>
    
    </table>

  10. #10
    SitePoint Zealot 19nine78's Avatar
    Join Date
    Feb 2002
    Location
    Ayr, scotland
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    for some reason the style sheet way isn't working...
    What browser???

    It only works on mozilla NOT IE6 or OPERA

    other than that it should have been OK.

    A link to the page and the stylesheet would be helpful

    cheers

    alastair

  11. #11
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by mmi
    thanks creole - how can I change this to get the bgcolor change in N4?
    You can't. It doesn't work in Netscape.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  12. #12
    Non-Member mmi's Avatar
    Join Date
    Jun 2001
    Location
    Rhode Island
    Posts
    587
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the first code I put up, despite any shortcomings, works for me in N6 and N4 as far as td bgcolor - of course, the link hover effect is not supported by N4

  13. #13
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What browser???
    Any browser, for sure not IE5 or any of the netscapes.. i haven't tried it with mozilla.

  14. #14
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    alright... i have it working in EI, NS6 & Mozilla.. I know that it doesn't work in NS4.x but what about Opara?

    thx.

    its all a learning process right

  15. #15
    Non-Member mmi's Avatar
    Join Date
    Jun 2001
    Location
    Rhode Island
    Posts
    587
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    good luck to anyone attempting to follow this thread

    I admit that the original code I put up doesn't validate, but it seems to work everywhere I've looked, inc. Opera - mmy second attempt (in an effort to meet the objections raised by creole) won't work in N4 cuz it probably doesn't support mouse events in span

    I lifted that stuff from a very stylish individual, so it can't be as lame as mmy coding efforts

  16. #16
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i got it...

    every browser BUT NS 4.x


    <td onMouseOver="this.style.backgroundColor = '#FFFFCC'" onMouseOut="this.style.backgroundColor = '#6699CC'" >


    for anyone that cares.. Opera and all

    ~nina

  17. #17
    Non-Member mmi's Avatar
    Join Date
    Jun 2001
    Location
    Rhode Island
    Posts
    587
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think N4 supports mouse events in TD's either

    validate, schmalidate - I say go with mmy original code!


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
  •