JSFiddle - React, Tailwind, and code Playground

by Dmitry Sviridenko

HTML

<div class="projects">
					<div class="edu block">
						<div class="text">
							1
						</div>
					</div>

					
					
					<div class="robo block">
						<div class="text">
							я должен быть синим если навести на 1 блок
						</div>
					</div>
					
					<!-- здесь в контейнере мы поменяли местами блоки -->
	<div class="container">
	
		<div class="render block">
			<div class="text">5</div>
		</div>		
		
		<div class="vk block">
			<div class="text">4</div>
		</div>
		
		<div class="news block">
			<div class="text">я должен быть красным если навести на 5 блок</div>
		</div>
		
</div>

CSS

.middle {
	position: absolute;
	top: 24%;
	left: -2px;
	width: 100%;
	z-index: 2;
	height: 61.5%;
}
.projects {
	width: 100px;
	height: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-around;
	align-content: space-around;
}
.block {
	min-width: 300px;
	background: #fff;
	border: 0.5px solid #3a3a3a;
	border-radius: 4px;
	width: 100px;
	height: 50px;
	padding: 0;
}

.render:hover ~ .news {
	background-color: red;
}
.edu:hover ~ .robo {
	background-color: blue;
}
/* здесь мы изменили порядок блоков на правильный */
.container{
	display: flex;
	flex-direction: column-reverse;
}