Как сделать затемнение блока?

Всем привет, есть блоки, и как по очереди их затемнять, дело в том что они стоят в притык и ховером у меня не получается сделать, может кто поможетвведите сюда описание изображения


Ответы (2 шт):

Автор решения: Vlas Zubenko

Сделал, используя .class:not(:hover)

→ Ссылка
Автор решения: Александр

 .elem {
   color: red;
   background: yellow;
   display: inline-block;
   width: 50px;
   text-align: center;
   border: 1px solid #000;
 }
 .items:hover .elem:not(:hover) {
   background: green;
   color: #FFF;
 }
<div class="items">
  <li class="elem">1</li>
  <li class="elem">2</li>
  <li class="elem">3</li>
  <li class="elem">4</li>
</div>

Используйте :not(:hover) Логика такая - слушаем весь список и применяем стили только к тем элементам, которые не имеют :hover

→ Ссылка