Imagine a scenario where hovering over one row changes its color. However, what if we want all rows of the same color to highlight when any row is hovered over? Is it possible to achieve this using just CSS?
.red-row:hover {
background-color: red;
}
.blue-row:hover {
background-color: blue;
}<body>
<p class="red-row">Red Row</p>
<p class="red-row">Red Row</p>
<p class="red-row">Red Row</p>
<p class="blue-row">Blue Row</p>
<p class="blue-row">Blue Row</p>
<p class="blue-row">Blue Row</p>
</body>