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>

Answer 2

为什么不只更改选择器的顺序，也将鼠标悬停在上一类上？

$<TARGET_FILE_DIR:${target}>

.row:hover {
  background-color: transparent;
}

.previous,
.previous:hover {
  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>

.row.previous是CSS4，几乎没有支持：https://developer.mozilla.org/en-US/docs/Web/CSS/:has

Answer 3

这是一个纯CSS解决方案。

当悬停具有上一个类时，可以为悬停设置不同的样式。

.row:hover {
  background-color: transparent;
}
.row.previous {
  background-color: grey;
}
.row.previous:hover {
  background-color: #595959; /*any color really*/
}

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

带悬停的CSS条件语句

3 个答案: