css question

by 6 replies
7
I'm trying to get an entire table cell (including the link inside it) to change color when the user rolls his mouse over it. The code in the .css file is:

a.bar:hover, td.bar:hover {color:#FFFFFF; background-color:#660000}

The problem with this is that if I highlight the cell but not the text directly, it only changes the background around the text, which looks really, really ugly. Is there any way I can get the link to change color just by hovering over the table cell?

Oh, and to add to the problem, in IE I can't get the cell to change color at all. Am I better off just using images instead of text links?
#website design #css #question
  • That's an interesting idea. You might be able to do it by creating a hidden <div> that would display when the link is hovered over. Like a popup help window works, or a css navigation bar. You'd just have to make the hidden one look like the visible one once its property is changed to display.
  • It's pretty simple. You just have to learn how to use the parent>child relationship correctly.


    You're working from left to right, parent to child.
    (for example: html > body > table > tr > td > a)

    You can define a class and use it anywhere in the path above,
    as well as the :hover modifier. Some elements/selectors can
    have modifiers, some can't.

    You may already know some of this, so skim over it. But this is
    the very nature of cascading!

    td {code for ALL cells}
    td a:link {all links inside any cell}
    td.class {all cells with this class}
    td.class a:link {all links in any cell with this class}

    td.class:hover {hovered cell with this class}
    td.class:hover a:link {all links inside a hovered cell with this class}
    td.class:hover a:hover {extra code in case you do want something while link text is hovered}

    This is the code for the demo above:
    HTML Code:
    <style>
table {text-align:center;background: #FFF;}
td.foo, td.bar {color:#000;}
td.foo a, td.bar a {color:#666;text-decoration:none;font-weight:bold;}

td.foo:hover, td.foo a:hover {background:#FCC;color:#FFF}
td.bar:hover, td.bar:hover a {background:#FCC;color:#FFF}
td:hover a:hover {text-decoration:underline;}
</style>

<table border=1 width=600 height=400>
 <tr><td class="bar">td.bar:hover, td.bar:hover a <a href="./"> {background:#FCC;color:#FFF}</a></td><td class="foo">td.foo:hover, td.foo a:hover<a href="./"> {background:#FCC;color:#FFF}</a></td></tr>
 <tr><td class="bar">Regular Text<a href="./"> Anchor Text</a></td><td class="foo">Regular Text<a href="./"> Anchor Text</a></td></tr>
 <tr><td class="bar">This is<a href="./"> RIGHT! </a></td><td class="foo">This is<a href="./"> WRONG! </a></td></tr>
</table>
    You can change the FCC background to 600, which I found too dark for
    the demo.

    EDIT: conclusion...

    td.bar:hover, td.bar:hover a {color:#FFFFFF; background-color:#660000}
    • [ 1 ] Thanks
    • [1] reply
    • Excellent, thank you. Doesn't work in IE but thankfully it doesn't work in IE at all so there won't be any partial rollover change, it'll just look like a plain text link.
  • Works fine in IE 7.
  • Hmm. I have 6 so that might be why. Still, I want my web site to still function in lower-end IE versions (even if it's not as pretty) so I don't lose customers who may not have the latest and greatest browsers (I'm thinking of the elderly in particular).
  • dark to make your website compatible with multi browsers you can add a java script like this in your head and have a couple different styles sheets to call on which most the time is one copy and slightly changed




Join the discussion

Next Topics on Trending Feed

  • 7

    css question

    I'm trying to get an entire table cell (including the link inside it) to change color when the user rolls his mouse over it. The code in the .css file is: a.bar:hover, td.bar:hover {color:#FFFFFF; background-color:#660000}