CSS兄弟悬停状态相互影响

Question

我想仅使用 CSS/LESS 解决表格中的以下情况:

在行的悬停上指示关闭图标上的交互

悬停在完成图标上表示在完成图标上进行交互

这个例子被简化来解释我遇到的问题。

.row:hover {
  .close {
    color: red;
  }
}
.doneCell:hover {
  .done:hover {
    color: red;
  }
  & ~ .closeCell {
      .close {
        color: black;
      }
  }
}

我目前所拥有的并没有完全按照我的意愿行事，当单元格悬停时，它会删除关闭图标上的交互悬停，因此当 doneCell 悬停时，它看起来没有交互。如果 .done:hover 存在，我只希望应用黑色。

我正在查看 :not 来尝试用一些疯狂的东西来解决问题，比如:

.closeCell:not(~ .doneCell:hover .done:not(&:hover)) {
    .close {
      color: black;
    }
}

但是我尝试使用的 :not 的任何变体都无法达到我的需要。我希望有人能看到我缺少的一些简单的东西。

谢谢

这是我目前的尝试:

.row:hover .close {
  color: red;
}
.doneCell:hover .done:hover {
  color: red;
}
.doneCell:hover ~ .closeCell .close {
  color: black;
}
.close,
.done {
  background-color: pink;
}
table {
  max-width: 400px;
}
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
th,
td {
  padding: 5px;
  text-align: left;

<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.0.0/less.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<table style="width:100%">
  <tbody>
    <tr class="row">
      <td class="cell doneCell">
        <i class="material-icons done">done</i>
      </td>
      <td class="cell closeCell">
        <i class="material-icons close">close</i>
      </td>
      <td>Some data</td>
    </tr>
   </tbody>
</table>

https://codepen.io/sheogora/pen/VXeJwv

Answer 1

为第一部分使用合适的选择器:

.row > td.closeCell:hover {
  .close {
    color: red;
  }
}

并添加另一种情况:

.row > td.doneCell:hover {
  .done {
    color: red;
  }
}

现在，当它们自己的单元格悬停时，它们都被涂成红色。