Как правильно прописать CSS?
Просто через CSS врятле можно решить. С помощью JS'а просто вешаешь ивент на ховер и береш ближайший блок от этого елемента https://developer.mozilla.org/ru/docs/Web/API/Elem..., например .block1, дальше уже задаешь с помощью JSа стиль

Тоесть примерно так. Без всяких блок1, блок2, блокN, просто класс block
[...document.querySelectorAll('.item')].forEach(item => {
	item.addEventListener('mouseenter', function (e) {
	   e.target.closest('.block').style.background = '#000';
	});
	item.addEventListener('mouseleave', function (e) {
		e.target.closest('.block').style.background = '#fff';
	});
});
Я правда так и не понял почему бы просто на блок ховер не повесить, ну да ладно
Смысл тот-же Как на JS сделать смену цвета при наведении мышки?

Вешаешь класс на блок при наведении, дальше стилями уже как нравится.