Range picker hover state

[nheath99]

.cal {
	display: grid;
	grid-template-columns: 50px 50px 50px 50px;

	&:hover {
		.selected ~ .day {
			background-color: lightblue;
		}
	}

	.day {
		padding: 0.5rem 1rem;
		text-align: center;
		border: 1px solid blue;
		border-radius: 5px;
		cursor: pointer;

		&.selected {
			background-color: darkblue;
			color: white;
		}

		&:hover {
			background-color: lightblue;

			& ~ .day:not(.selected) {
				background-color: white;
			}
		}
	}
}

<div class="cal">
	<div class="day"><div class="day-content">1</div></div>
	<div class="day"><div class="day-content">2</div></div>
	<div class="day"><div class="day-content">3</div></div>
	<div class="day"><div class="day-content">4</div></div>
	<div class="day selected"><div class="day-content">5</div></div>
	<div class="day"><div class="day-content">6</div></div>
	<div class="day"><div class="day-content">7</div></div>
	<div class="day"><div class="day-content">8</div></div>
	<div class="day"><div class="day-content">9</div></div>
	<div class="day"><div class="day-content">10</div></div>
</div>