Why Doesn't CSS Hover Work on Table Rows When The Cells Inside The Rows Have Class Names

Why doesn't CSS hover work on table rows when the cells inside the rows have class names?

Try this:

tr:hover td {
  background-color: #FFFAF0; color: #000;
}

Place this after the existing td style declarations to be safe

CSS Highlight Table Row But Not When Hovering First 3 Cells

The 4^th, 5th^th, and 6^th
columns were all <th>, the cells that are in the <tbody> should be <td>, so that is corrected. Also, I added a <thead> to it as well and an extra <tr> to show that the highlight affects each <tr> separately.

In order to meet the following criteria:

no JavaScript
valid HTML and CSS only
the 4^th, 5th^th, and 6^th <td> of any <tr> within the <tbody> should all be highlighted at once if any one of them is hovered over.
the 1^st, 2^nd, and 3^rd <td> of any <tr> within the <tbody> should never trigger any effects when hovering over them.

A sub-table could be used to isolate the last 3 columns:

in the <tbody>, remove the last 2 <td> of each <tr>.
add colspan="3" to the last <td> of each <tr> within the <tbody>
add a <table> into each of those <td colspan="3">
add a <tr> into that <table>
add 3 <td> into that <tr>

Figure I - a sub-table

      <td class='col' colspan='3'>
        <table class='sub'>
          <tr><td>Joe</td><td>37</td><td>Male</td></tr>
        </table>
      </td>

table {
  table-layout: fixed;
  border-collapse: collapse;
}

th {
  width: 5%;
}

th:nth-of-type(4) {
  width: 50%;
}

th:nth-of-type(5) {
  width: 5%;
}

th:nth-of-type(6) {
  width: 15%;
}

td {
  border: 1px solid #000;
  background: transparent;
  text-align:center;
}

.col {
  padding: 0;
  border: 0;
  outline: 1px solid #000;
  outline-offset: 0;
}

.sub tr:hover td {
  background: #fc0;
}

.sub {
  table-layout: fixed;
  border-collapse: collapse;
  min-width: 100%;
  padding: 0;
  border: 0.5px solid #000;
}

.sub td {
  padding: 5px;
  border: 1px solid 0.5px;
  text-align: left;
}

.sub td:first-of-type {
  width: 70%;
  border-left: 0;
}

.sub td:nth-of-type(2) {
  width: 10%;
  text-align: center;
}

.sub td:last-of-type {
  width: 20%;
}

<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><button>A</button></td>
      <td><button>B</button></td>
      <td><button>C</button></td>
      <td class='col' colspan='3'>
        <table class='sub'>
          <tr><td>Joe</td><td>37</td><td>Male</td></tr>
        </table>
      </td>
    </tr>
    <tr>
      <td><button>A</button></td>
      <td><button>B</button></td>
      <td><button>C</button></td>
      <td class='col' colspan='3'>
        <table class='sub'>
          <tr><td>Jill</td><td>37</td><td>Female</td></tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

CSS hover on a table row with the exception of some cells

It's best not to use !important in css whenever possible, it becomes a challenge to override it afterward. Rather than applying the hover on the <TR> it was moved to the <TD> and the :last-of-type selector was used to keep the fourth <TD> background transparent.

.multidata td,.multidata th {  border: 2px solid #808080;  padding: 5px 5px;}
.multidata tbody>tr:hover td {  background-color: #96c7ef;}
.multidata tbody>tr:hover td:last-of-type {  background-color: rgba(0, 0, 0, 0);}
.tdX {  background-color: red;  font-weight: bold;}
.tdY {  background-color: green;  font-weight: bold;}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html>
<head>  <meta http-equiv="cache-control" content="no-cache">  <meta http-equiv="expires" content="0">  <meta http-equiv="pragma" content="no-cache">  <link rel="stylesheet" href="./basic.css" type="text/css"></head>
<body>  <table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">    <thead>      <tr class="change_on_hover">        <th style="width: 10%">ID</th>        <th style="width: 10%">Name</th>        <th style="width: 10%">Status</th>        <th style="width: 10%">Button</th>      </tr>    </thead>
    <tr class="change_on_hover">      <td class="td1" style="color:grey"><i>1</i></td>      <td class="td1" style="color:grey"><i>First</i></td>      <td class="tdX" align="center"><b>Disabled</b></td>      <td class="rightTD" align="center"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAAZiS0dEAIcApgBpEx4v0wAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB9sMBw0pJeuQSwsAAAEJSURBVDjL3ZQ9TsNAEIU/I18k93CHUOSGSCA3VhqofIK0EW1OEFFBgyKlIaJI4YYi9+AgeN5QmEX5E94oLhDTrXbmzZv3Zhf+eiRdCfN6wnqzBCDPCqqr2a/5aURTP4VEJ+B6s+S+rDCJ58VjZ/eLGF0kx82jNIwZGTMhKQowiqHLcZ3IcF5PADw4uh3NZ4O+AUfTwQ5ynhUASXA/3RYf4K6skITMkQlr9HO+HY5pGmEmXEJy9gmkh+MJNyG1ZgQwlzC1TQLYMV3TPeo8HVmNm+EYSbzWLwd3oW7FLO6ljKYDv74scRNv7wtWDx/J+S73vTZBx/4WW60pvQDmWbHz2wTxz2GY8K/iC8BCorjCvk26AAAAAElFTkSuQmCC"        /></td>    </tr>
    <tr class="change_on_hover">      <td class="td2" style="color:grey"><i>2</i></td>      <td class="td2" style="color:grey"><i>Second</i></td>      <td class="tdY" align="center"><b>Active</b></td>      <td class="rightTD" align="center"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAAZiS0dEAIcApgBpEx4v0wAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB9sMBw0pJeuQSwsAAAEJSURBVDjL3ZQ9TsNAEIU/I18k93CHUOSGSCA3VhqofIK0EW1OEFFBgyKlIaJI4YYi9+AgeN5QmEX5E94oLhDTrXbmzZv3Zhf+eiRdCfN6wnqzBCDPCqqr2a/5aURTP4VEJ+B6s+S+rDCJ58VjZ/eLGF0kx82jNIwZGTMhKQowiqHLcZ3IcF5PADw4uh3NZ4O+AUfTwQ5ynhUASXA/3RYf4K6skITMkQlr9HO+HY5pGmEmXEJy9gmkh+MJNyG1ZgQwlzC1TQLYMV3TPeo8HVmNm+EYSbzWLwd3oW7FLO6ljKYDv74scRNv7wtWDx/J+S73vTZBx/4WW60pvQDmWbHz2wTxz2GY8K/iC8BCorjCvk26AAAAAElFTkSuQmCC"        /></td>    </tr>  </table></body>
</html>

Table hover in CSS doesn't work properly

Add this code

  .datagrid table tbody .alt:hover td {
        background: #fff380 none repeat scroll 0 0;
    }

Instead of

.datagrid table tbody .alt:hover {
  background: #FFF380;
}

CSS hover not works on a table cell if it has a specific background color

If you say just tr hover then you can just change tr background, but td has background and over the tr. So you should say hovered tr's td. So just add

.multidata  tbody>tr:hover td {
    background-color:#96c7ef!important;
}

.multidata td,.multidata th {    border: 2px solid #808080;    padding: 5px 5px;}
.multidata  tbody>tr:hover td {    background-color:#96c7ef!important;}.tdX {    background-color:red;    font-weight:bold;}
.tdY {    background-color:green;    font-weight:bold;}

<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">    <thead>        <tr>            <th style="width: 10%">ID</th>            <th style="width: 10%">Name</th>            <th style="width: 10%">Status</th>        </tr>    </thead>
    <tr>        <td class="td1" style="color:grey"><i>1</i></td>        <td class="td1" style="color:grey"><i>First</i></td>        <td class="tdX" align="center"><b>Disabled</b></td>    </tr>
    <tr>        <td class="td2" style="color:grey"><i>2</i></td>        <td class="td2" style="color:grey"><i>Second</i></td>        <td class="tdY" align="center"><b>Active</b></td>    </tr></table>

CSS hover changing style of other text / class doesn't work if within a table cell

The issue here has to do with the ~ selector. It only selects subsequent siblings and not children of siblings. This is why it works on your first line, and not the one nested in the table. Here is a handy list of css selectors that I find helpful.

Unfortunately there isn't a way to solve this purely with CSS without changing the way your html is laid out. You could try something like:

Html:

<div class="wrapper">
 //all your existing html
</div>

CSS:

.wrapper:hover .span2 {
    color: red;
}

Or you could keep your current html, and go a jQuery solution:

$(document).ready(function () {
  $('.span1').hover(
      function () {
          $('.span2').css('color', 'red');
      }, function () {
          $('.span2').css('color', 'black');
      }
   );
});

Here is a working fiddle of both.

Hovering rows with the same class in HTML table with CSS only

You can use :has() which Chrome and Edge now support, presumably with the rest of the browsers to follow:

.tables {
  display: flex;
}

table {
  margin: 10px;
}

table,
tr,
td {
  border: 1px solid black;
}

div.tables:has(tr.row-1:hover) tr.row-1,
div.tables:has(tr.row-2:hover) tr.row-2 {
  background-color: red;
}

<div class="tables">
  <table>
    <tr class="row-1">
      <td>row 1, col 1</td>
      <td>row 1, col 2</td>
    </tr>
    <tr class="row-2">
      <td>row 2, col 1</td>
      <td>row 2, col 2</td>
    </tr>
  </table>
  <table>
    <tr class="row-1">
      <td>row 1, col 1</td>
      <td>row 1, col 2</td>
    </tr>
    <tr class="row-2">
      <td>row 2, col 1</td>
      <td>row 2, col 2</td>
    </tr>
  </table>
</div>

Implementing hover color change in CSS class not working

It's a combination of the wrong selector, and insufficient specificity. Try this instead (See JSFiddle):

.table-hover > tbody > .greenSelected:hover td {
  background-color: #D0E9C6;
}

Explanation

Defined within your included Bootstrap CSS is this rule:

.table-hover > tbody > tr:hover > td, ... {
  background-color: #f5f5f5;
}

To override this rule, your new rule must be more specific (in my solution, we're acheiving this by selecting an element by it's class rather than it's tag name). Furthermore, as is pointed out in this answer, you should set the hover selector at the table-row level, but then the elements you wish to change background colour for, are it's table-cell children.

Whilst you could use the !important declaration to overcome the specificity issue, I wouldn't recommend it. Instead, make sure that whenever you create CSS rules, you be only as specific as needs be, and have a good understanding of why your rules are being applied.

How to change the hover background color of a table row that has a specific class in bootstrap?

It is actually doing the hover - just not using the color you tried to apply due to the .table-hover and specificity due to https://getbootstrap.com/docs/5.1/content/tables/#how-do-the-variants-and-accented-tables-work

To use your own hover on all rows you can remove the table-hover class and force it on the td.

table.table>tbody>tr:hover td,
table.table>tbody>tr:hover th {
  background-color: #ff4444 !important;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

<table class="table">
  <thead>
    <tr>
      <th scope="col">Type</th>
      <th scope="col">Column heading</th>
      <th scope="col">Column heading</th>
      <th scope="col">Column heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Default</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="table-primary">
      <th scope="row">Primary</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="table-dark">
      <th scope="row">Primary</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
  </tbody>
</table>
<div>
  Fix for When either .table-striped, .table-hover or .table-active classes are added, the --bs-table-accent-bg is set to a semitransparent color to colorize the background. For each table variant, we generate a --bs-table-accent-bg color with the highest
  contrast depending on that color. For example, the accent color for .table-primary is darker while .table-dark has a lighter accent color.

Why Doesn't CSS Hover Work on Table Rows When The Cells Inside The Rows Have Class Names