#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    677
    Rep Power
    7

    TR class override TD class?


    I have tables on a site that as you hover over a row, the whole row successfully highlights. The current table at-hand needs some column shaded to help visually seperate the columns. I did this with a class and defined such in those columns.

    Now, the issue is that only the columns with no class of their own highlight. I added the hover item to the otheres, but that only takes care of that cell directly, and not the whole row.

    Is there a way I can keep it highlighting the entire row when hovered over, while adding a faded background to a couple columns?
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Yes, it's quite possible do to that. You just need to add so more selectors with higher specificity to override the background for all cells when a row is hovered.

    If you would like more specific advice, we'll need to see your HTML and CSS.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    677
    Rep Power
    7
    Originally the '.highlightable:hover' was the only item to highlight rows. The others are attempts to add in coloring columns.
    Code:
    <TR class="highlightable" href="?loc=rolodex&action=view&id=' . $col1 . '">
      <TD>' . $col2 . '</TD>
      <TD>' . $col3 . '</TD>
      <TD class="prospective">' . $col4 . '</TD>
      <TD class="prospective">' . $col5 . '</TD>
      <TD class="prospective">Pending...</TD>
      <TD class="service"></TD><TD class="service"></TD>
      <TD class="service">' . $col7 . '</TD>
      <TD class="service"></TD>
      <TD class="service"></TD>
      <TD class="service"></TD>
    </TR>
    Code:
    .prospective {
      background-color: rgba(255, 211, 69, 0.2);
    }
    
    .prospective:hover{
      background-color: lightgray;
    }
    
    .service {
      background-color: rgba(102, 255, 51, 0.1);
    }
    
    .service:hover{
      background-color: lightgray;
    }
    
    .highlightable:hover{
      background-color: lightgray;
    }
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    677
    Rep Power
    7
    Meh. Got it. Just added `td` to `highlightable` and removed my 2 added hover items.
    Code:
    .prospective {
      background-color: rgba(255, 211, 69, 0.2);
    }
    
    .service {
      background-color: rgba(102, 255, 51, 0.1);
    }
    
    .highlightable:hover td{
      background-color: lightgray;
    }
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Congratulations on figuring it out.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo