<div id="blocks">
	<div class="block block--hover"></div>
	<div class="block"></div>
	<div class="block block--hover"></div>
	<div class="block"></div>
	<div class="block block--hover"></div>
	<div class="block"></div>
</div>
// autoprefixer: true

html,
body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: #555;
	height: 100%;
	background: #fff;
}

* {
	box-sizing: border-box;
}

#blocks {
	display: flex;
}

.block {
	width: 60px;
	height: 60px;
	margin: 5px;
	background: #eee;
	transition: .2s ease;
	box-shadow: 0 0 0 0 #000;

	&--hover {
		cursor: pointer;
		background: #91ff9a;
		
		&:hover {
			background: darken(#91ff9a, 10%);
			box-shadow: 0 0 0 2px #000;
			
			& + .block {
				box-shadow: 0 0 0 2px #000;
			}
		}
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js