html - 带悬停的 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>