7 {{ upvoteCount | shortNum }}
7 {{ upvoteCount | shortNum }}

css question

by Darth Executor
6 replies
  • WEB DESIGN
    • |
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?
#css #question
  • Profile picture of the author Aronya
    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.
    {{ DiscussionBoard.errors[705847].message }}
  • Profile picture of the author RedMatrix
    It's pretty simple. You just have to learn how to use the parent>child relationship correctly.
    HERE is a live demo.

    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}
    Signature

    ~Dave

    {{ DiscussionBoard.errors[706421].message }}
    • Profile picture of the author Darth Executor
      Originally Posted by RedMatrix View Post

      It's pretty simple. You just have to learn how to use the parent>child relationship correctly.
      HERE is a live demo.

      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}
      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.
      {{ DiscussionBoard.errors[706856].message }}
  • Profile picture of the author Aronya
    Works fine in IE 7.
    {{ DiscussionBoard.errors[707062].message }}
  • Profile picture of the author Darth Executor
    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).
    {{ DiscussionBoard.errors[707538].message }}
  • Profile picture of the author cakdesigns
    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

    <script language="JavaScript"><!--
    browser_version= parseInt(navigator.appVersion);
    browser_type = navigator.appName;
    if (browser_type == "Microsoft Internet Explorer" && (browser_version >= 4)) {
    document.write("<link REL='stylesheet' HREF='e4.css' TYPE='text/css'>");
    }
    else if (browser_type == "Netscape" && (browser_version >= 4)) {
    document.write("<link REL='stylesheet' HREF='netscape4.css' TYPE='text/css'>");
    }
    // --></script>
    {{ DiscussionBoard.errors[713574].message }}

Trending Topics