CSS Conditional Statements with hover

Question

This question might be simpler in conditional CSS.

I have five rows with some contents and based on some condition, I'm adding a class named 'previous' to show different background color.

When I hover the previous class content, I'm getting transparent background which is not good.

I wanted to show the same background color (grey) even if it is hovered.

So, I tried the below code and tried to use :has condition in css, If it has previous class, change the hover color to grey. But it didn't worked.

My expectation is to have the same background color even if it is hovered.

Can someone help me on this as I need the solution only from CSS/SCSS. not from 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

You can do this using :not pseudo class to exclude rows with previous class from hover effect. Now :hover will run on every element that has a .row class but doesn't also have .previous class.

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