带有悬停的 CSS 条件语句

Question

这个问题在条件 CSS 中可能更简单。

我有五行包含一些内容，并且根据某些条件，我添加了一个名为“previous”的类来显示不同的背景颜色。

当我悬停上一堂课的内容时，我得到了不好的透明背景。

即使将其悬停，我也想显示相同的背景颜色（灰色）。

所以，我尝试了下面的代码并尝试在 css 中使用:has条件，如果它有以前的类，请将悬停颜色更改为灰色。但它没有奏效。

我的期望是即使将其悬停也具有相同的背景颜色。

有人可以帮我解决这个问题，因为我只需要来自CSS/SCSS的解决方案。不是来自 javascript。

.previous {
  background-color: grey;
}
.row:hover {
  background-color: transparent;
  :has(.previous) {
      background-color: grey;
  }
}

<div class="row">Some Content 1</div>
<div class="row previous">Some Content 2</div>
<div class="row">Some Content 3</div>
<div class="row previous">Some Content 4</div>
<div class="row">Some Content 5</div>

Answer 1

您可以使用:not伪类来执行此操作，以previous从悬停效果中排除具有类的行。现在:hover将在每个有.row类但没有类的元素上运行.previous。

.row {
  background-color: lightblue;
}

.previous {
  background-color: grey;
}

.row:not(.previous):hover {
  background: transparent;
}

<div class="row">Some Content 1</div>
<div class="row previous">Some Content 2</div>
<div class="row">Some Content 3</div>
<div class="row previous">Some Content 4</div>
<div class="row">Some Content 5</div>