Question

我想在仅使用CSS / LESS解决的表中有以下情况：

在行的悬停上表示关闭图标上的互动

在完成图标悬停时，表示已完成图标上的互动

这个例子很简单，可以解释我遇到的问题。

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

我目前所拥有的并不是我想要的，它会在单元格悬停时移除关闭图标上的交互，所以当doCell悬停时它看起来似乎没有交互。如果.done：hover存在，我只想要应用黑色。

我看着:not尝试用疯狂的东西解决问题：

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

但任何变化：不是我试图使用不能达到我需要的。我希望有一些简单的东西让我失踪，有人可以看到。

由于

这是我目前的尝试：

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

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

CSS兄弟姐妹悬停状态相互影响

1 个答案: