javascript – 悬停td从hover tr中删除背景颜色变化

我有一个用于表行的通用类,当它们悬停时会改变它的td的背景颜色.我在我的应用程序中使用它.

.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>

现在,我有一个特殊的表(2维),在第一列我有td的行.

 

最后,当我悬停rowspan td时,我想摆脱背景颜色的变化：

 

当我将鼠标悬停在业务字段上时,悬停效果将应用于新的第1行,但是当我将鼠标悬停在第二行时,它不会应用于具有rowspan的td.我想通过从第一个td中删除悬停动作来解决这个问题.

如何在rowspan td上转义悬停效果,但保留表行(各个子行 – new column1,new column2)？

它只能通过CSS完成吗？

解决方法

您可以使用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()不是一个选项,您可以重置第一个单元格的背景颜色,如下所示：

.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方式,您可以在td [rowspan]上使用pointer-events: none;来防止触发该元素上的鼠标事件.

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.