Results 1 to 10 of 10
  1. #1
    Join Date
    Jan 2005
    Location
    Milton Keynes, UK
    Posts
    255

    CSS: Change table cell bg colour with link hover?

    Hi guys,

    I have two questions really. The first is: Is it possible to make not just text into a link but make the whole cell of a table into a link? Also, when I mouse over the link, how can I make the whole cell change its background colour rather than just the text? I tried using a:hover{background-color:#006600;} but of course that just changed the background color of the text.

    Thanks

  2. #2
    You can't do it directly on the link, but if you're using tables, you can do the following:

    Code:
    TD {
    	background-color: #000000; 
    }
    TD:hover {
    	background-color: #fffff; 
    }

  3. #3
    Join Date
    Jan 2005
    Location
    Milton Keynes, UK
    Posts
    255
    Hi,

    Thanks... That kind of works, except my background is #ffffff and my link is #006600 and I want it so when I mouse over a link the background is #006600 and the link is #ffffff so with that code if someone puts the mouse cursor into the cell without putting it over the text they get completely #006600 and can't read the text. Any ideas?

    Thanks

  4. #4
    Join Date
    Jan 2005
    Location
    Milton Keynes, UK
    Posts
    255
    Hi again,

    While the td:hover{} works fine in the GoLive CS2 Preview panel, it doesn't seem to have any effect in IE6. Any ideas?

    Thanks

  5. #5
    Sorry for taking so long to respond, but you can try this:

    Code:
    TD.effect {
    	background-color: #ffffff; 
    }
    TD.effect:hover {
    	background-color: #006600; 
    }
    a.effect:link {
            color: #006600;
    }
    a.effect:hover {
            color: #ffffff;
    }
    For the links (a href) and cells (td) you want affected by this rule: add this:

    Code:
    class="effect"
    Hope this helped. =)

  6. #6
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    533
    Originally posted by GTX Network
    Hi again,

    While the td:hover{} works fine in the GoLive CS2 Preview panel, it doesn't seem to have any effect in IE6. Any ideas?

    Thanks
    IE does not support hover on any elements other than 'a' (anchors).

  7. #7
    Join Date
    May 2004
    Location
    Lansing, MI, USA
    Posts
    1,548
    Originally posted by gogocode
    IE does not support hover on any elements other than 'a' (anchors).
    Interesting, I could swear I have seen it working in IE on tables... though maybe I broke some standards to get it to work
    Jacob - WebOnce Technologies - 30 Day 100% Satisfaction Guarantee - Over 5 Years Going Strong!
    Website Hosting, PHP4&5, RoR, MySQL 5.0, Reseller Hosting, Development, and Designs
    Powered By JAM - Professional Website Development - PHP, MySQL, JavaScript, AJAX - Projects Small & Large

  8. #8
    Join Date
    Jan 2005
    Location
    Milton Keynes, UK
    Posts
    255
    Same... I'm sure I've seen it working too. Well, I guess I'll keep looking around and see what I can find. Hopefully I can find another site that's doing it and find out how.

    Thanks for all your help guys!

  9. #9
    This technique is very cool, the best realization I've ever seen:h t t p : / / w w w .xs4all.nl/~peterned/csshover.html

    I think that's it.

  10. #10
    I do it on my site - http://www.neohz.com


    PHP Code:
    <style>
    td{background-color:#EEEEEE;}
    </style>
    <
    script>
    function 
    out(id) {
      
    id.style.backgroundColor='#EEEEEE';}

    function 
    over(id) {
      
    id.style.backgroundColor='#F4F5E7';}
    </script>
    <table>
    <tr>
    <td width="50%"><a href="http://www.neohz.com"><div onmouseover="over(this)" onmouseout="out(this)">NeoHz</div></a></td>
    </tr>
    </table> 

Posting Permissions

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