悬停 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 行，但是当我悬停在第二行时，它不会应用于 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.

---

基本上我需要的是，当我将鼠标悬停在 td 上时，不会在 tr 上应用任何内容

实际上，您正在悬停tr 本身，而不仅仅是td（指td[rowspan]）

是否有可能在 CSS 的树结构中走得更高

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

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

Working Demo #3。

否则，除了td[rowspan] 之外，您需要使用 JavaScript 更改所有悬停的表格单元格。

例如：

$('.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.

Answer 2

你可以做几件事：

.enty-table {
    & td:hover {
        background-color: lightgrey;
    }
}
.enty-table {
    & tr:hover {
        background-color: lightgrey;
    }
}

Answer 3

请试一试。使用类树并使用选定对象更改样式。它适用于所有使用正确树模式的“TD”。

$(document).ready(function(){
  $(".enty-table tr td").hover(function(){
    $(this).css("background-color","yellow");
  });
  $(".enty-table tr td").mouseout(function(){
    $(this).css("background-color","lightgray");
  });
});

http://jsfiddle.net/vDD5p/