无法让Hover在同一位置的不同级别上生成2个元素

Question

我试图重新创建一个我感兴趣的网站副本。我有一个div设置表，在行中。在行上，我设置了4个以列形状绝对定位的div，并将显示设置为none。当我将鼠标悬停在行中的某个元素上时，我希望激活行的悬停效果并激活整个列的列效果。我已经尝试在列位置.one .two等中选择元素并选择列row.one:hover~#col，但是我尝试过的所有内容似乎只激活顶级元素而不是两者都立刻（这些元素在某些地方重叠。非常感谢任何帮助解决这个问题。我希望能够在没有javascript的情况下实现这一效果。

https://jsfiddle.net/peacefulgoldfish/txcet4yw/2/

＆＃13;

＆＃13;

body {
  width: 100vw;
  margin: 0px;
  padding: 0px;
  background-color: blue;
  overflow: hidden;
}

h1,
h2 {
  font-family: sans-serif;
  color: white;
  text-align: center;
}

#container {
  width: 80vw;
  margin: auto;
  height: auto;
  background-color: rgb(123, 108, 160);
  position: relative;
}

.row {
  height: 125px;
  background-color: green;
  margin: 0px;
  padding: 0px;
}

.one {
  border: none;
  height: 125px;
  float: left;
  width: 25%;
  background-color: white;
  margin: 0px;
}

.two {
  border: none;
  height: 125px;
  float: left;
  width: 25%;
  background-color: green;
  margin: 0px;
}

.three {
  border: none;
  height: 125px;
  float: left;
  width: 25%;
  background-color: white;
}

.four {
  border: none;
  height: 125px;
  float: left;
  width: 25%;
  background-color: green;
}

.row:hover>div {
  background-color: red;
}

#col1 {
  display: none;
  position: absolute;
  height: 100%;
  width: 25%;
  background-color: purple;
  float: left;
  z-index: 1;
  opacity: .7;
  mix-blend-mode: hardlight;
}

.row.one:hover~#col {
  display: block;
}

＆＃13;

<h1>WEB</h1>
<h2>Hey everyone</h2>
<div id="header"> </div>
<div id="container">
  <!-- column selectors -->
  <div id="col1"></div>
  <div id="col2"></div>
  <div id="col3"></div>
  <div id="col4"></div>


  <div class="row">
    <div class="one">
      <p>Week 1</br> May 7 <br> - <br> May 11 </p>
    </div>
    <div class="two">
      <ul>
        <li> Course introduction </li>
        <li> Internet Architecture </li>
        <li> Introduction to Javascript </li>
      </ul>
    </div>
    <div class="three">
      <a href=""> Welcome </a>
      <a href="">Lecture 1 </a>
    </div>

    <div class="four">
      <h3> Work Due </h3>
    </div>
  </div>
  <div class="row">
    <div class="one">
      <p> Week 2</p>
    </div>
    <div class="two">
      <ul>
        <li> Javascript functions </li>
        <li> Built in Global Functions </li>
      </ul>
    </div>
    <div class="three">
      <a href=""> Lecture 2 </a>
    </div>
    <div class="four"></div>
  </div>
  <div class="row">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>

  </div>
</div>


<div class="special"></div>

＆＃13;

＆＃13;

＆＃13;