CSS 悬停在 table 行上，某些单元格除外

Question

基于我之前的 I would like to add a 4th column, that contains only images. The hover should not effect this column. Because of the image is smaller, then the cell itself, it looks strange with hover. I found something similar here，但为了使它起作用，我必须用 class 属性标记每个 <td>，每行的第 4 个 <td> 除外.但是下面代码中的 table 具有不同的结构：只有具有特殊含义的列才具有 class 属性。在这种情况下，每行的第 4 个 <td> 具有 class rightTD.

我对 CSS 进行了以下修改：

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

（已添加 :not(.rightTD)）

HTML 扩展了一个新的 header：

<th style="width: 10%">Button</th>

并且两个单元格的内容相同：

问题：第 4 列（header 除外）仍然受到悬停的影响。

如何禁用第 4 列的悬停？

代码如下：

.multidata td,.multidata th {
    border: 2px solid #808080;
    padding: 5px 5px;
}

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

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

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

Answer 1

.multidata tbody>tr:hover td:not(:last-child) {
    background-color:#96c7ef!important;
}

Answer 2

最好不要在 css 中使用 !important，因为以后要覆盖它会成为一个挑战。它没有在 <TR> 上应用悬停，而是移动到 <TD> 并且 :last-of-type 选择器用于保持第四个 <TD> 背景透明。

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

CSS 悬停在 table 行上，某些单元格除外

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

html

css

hover