CSS：如果已悬停项目，则动态悬停另一个项目

Question

我有一个设置，可以动态渲染一系列并排的div。 div的数量取决于我要加载的数据量而有所不同。这就是当我需要3格并排div时的样子。

<a href="/login?returnUrl=/foo">Go to Foo, but login first</a>

.wrapper {
  display: flex;
}

div {
  height: 40px;
  width: 500px;
  border: 1px solid black;
}

#item-1:hover {
  background-color: red;
  /*   Somehow make matching-1 hover to background-color: red */
}

/* #item-{X}:hover + #matching-{X}{
  # I think I want something along these lines
} */

我要在以下位置创建效果：

1. 如果悬停了<div class="wrapper"> <div id="item-1"></div> <div id="item-2"></div> <div id="item-3"></div> </div> <div class="wrapper"> <div id="matching-1"></div> <div id="matching-2"></div> <div id="matching-3"></div> </div>，那么匹配X也将悬停
2. 如果悬停了item-X，则X项也将悬停。

使用纯CSS是否可能？

以下是相应的密码笔：https://codepen.io/anon/pen/oRqmZw