javascript - 悬停 td 从悬停 tr 中逃脱背景颜色变化

Question

我有一个用于表行的通用类，它在鼠标悬停时更改其 td 的 background-color 。我在我的整个应用程序中都使用它。

.enty-table {
    &:hover > td {
        background-color: lightblue;
    }
}

 <table class="table table-bordered">
     <thead>
         <tr>
             <th></th>
             <th>Name</th>
             <th>Min Length</th>
             <th>Max Length</th>
             <th>Min Value</th>
             <th>Max Value</th>
             <th>Regular Expr</th>
             <th>Default Value</th>
         </tr>
     </thead>
     <tbody>
         <tr class="enty-table">
             <!-- I want the hover on the folowing td to escape the hover effect added with enty-table class on tr -->
             <td class="columnCategory">Business Fields</td>
             <td><strong>new column1</strong></td>
             <td><span></span></td>
             <td><span></span></td>
             <td><span></span></td>
             <td><span></span></td>
             <td><span></span></td>
             <td><span></span></td>
          </tr>
          <tr class="enty-table">
             <td><strong>new column2</strong></td>
             <td><span></span></td>
             <td><span></span></td>
             <td><span></span></td>
             <td><span></span></td>
             <td><span></span></td>
             <td><span></span></td>
          </tr>
      </tbody>
 </table>

现在，我有一个特殊的表(二维)，在第一列中我有 td 和 rowspan。

最终，当我将鼠标悬停在 rowspan td 上时，我想摆脱背景颜色的变化:

当我将鼠标悬停在 Business Fields td 时，悬停效果应用于 new column1 行，但是当我将鼠标悬停在第二行时row 它不应用于 td 和 rowspan。我想通过从第一个 td 中删除悬停操作来解决这个问题。

如何避免 rowspan td 上的悬停效果，但将其保留在表行中(各个子行 - new column1 、new column2)?

只能通过 CSS 完成吗？

Answer 1

你可以使用 CSS :not() 忽略 <td> 的伪类有rowspan属性，然后使用 CSS general sibling selectors 重置表格单元格的背景颜色，如下:

.enty-table {
  &:hover > td:not([rowspan]) {
    background-color: lightblue;
  }

  & > td[rowspan]:hover ~ td {
    background-color: #fff; /* Reset the background of next cells */
  }
}

JSBin Demo .

更新

如果使用 CSS :not()不是一个选项，您可以重置 background-color第一个单元格如下:

.enty-table {
  &:hover > td {
    background-color: lightblue;
    /* Reset the background color of td[rowspan] */
    &[rowspan] {
      background-color: #fff;
    }
  }

  & > td[rowspan]:hover ~ td {
    background-color: #fff; /* Reset the background */
  }
}

JSBin Demo #2 .

---

Basically what I need is when I hover that td there will be nothing applied on the tr

实际上，您将鼠标悬停在 tr 上本身，不仅如此td (引用td[rowspan])

Is it possible to go higher in the tree structure from CSS

CSS 是级联的，没有向后和/或父选择器 ( yet )。

作为纯 CSS 方式，您可以使用 pointer-events: none; 在 td[rowspan] 上以防止在该元素上触发鼠标事件。

Working Demo #3 .

否则，您需要使用 JavaScript 在悬停每个表格单元格时更改所有表格单元格，不包括 td[rowspan]。 .

例如:

$('.enty-table').children('td:not(td[rowspan])').hover(function() {
  $(this).siblings(':not(td[rowspan])').addBack().addClass('hover');
}, function() {
  $(this).parent().children('td').removeClass('hover');
});

Working Demo #4 .