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>

现在，我有一个特殊的表（2维），在第一列中我有td的行数。

My table

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

unwanted effect

当我将鼠标悬停在Business Fields td 上时，悬停效果会应用于new column1行，但当我将鼠标悬停在第二行时，它不会应用于<{1}}行em> 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

否则，您需要使用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

Answer 2

你可以做的几件事：

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

Answer 3

请试一试。使用类树并使用所选对象更改样式。它将适用于所有＆＃34; TD＆＃34; s使用适当的树模式。

$(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/

悬停td从hover tr中转义背景颜色变化

3 个答案:

更新