Невозможно навести курсор на 2 элемента на разных уровнях одной и той же позиции.

Question

Я пытаюсь воссоздать копию сайта, который мне показался интересным. У меня есть таблица div, в строках. Над строками я установил 4 деления с абсолютным позиционированием в форме столбцов и установил отображение на нет. При наведении указателя мыши на элемент в строке мне бы хотелось, чтобы активировался эффект наведения строки и эффект столбца для всего столбца. Я попытался выбрать элемент в позиции столбца .one .two и т. Д. И выбрать столбец row.one:hover ~ #col, однако все, что я пробовал, похоже, активирует элемент верхнего уровня не сразу, а оба элементы перекрываются местами. Буду очень признателен за любую помощь в исправлении этого. Я хотел бы иметь возможность сделать этот эффект без JavaScript.

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

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;
}

<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>

Answer 1

если я вас правильно понял, значит, это решение для вас

CSS:

    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;

    }

    .col-trigger{
        border: none;
        height: 125px;
        float: left;
        width: 25%;
        margin: 0px;
    }

    .white{
        background-color:white;

    }

    .green{
        border-color: green;
    }

    .row:hover > div{

        background-color:red;
    }

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

    .col2 {

        left: 25%;

    }
    .col3 {

        left: 50%;

    }
    .col4 {

        left: 75%;

    }

    .col-trigger:hover+.col{
        display: block;
     }

HTML:

    <h1>WEB<h1>
    <h2>Hey everyone</h2>
    <div id="header"> </div>
    <div id="container">

    <div class="row">
        <div class="col-trigger white">
            <p>Week 1</br> May 7 <br> - <br> May 11 </p>

        </div>
        <div class="col col1"></div>

        <div class="col-trigger green">
            <ul>
                <li> Course introduction </li>
                <li> Internet Architecture </li>
                <li> Introduction to Javascript </li>
            </ul>
        </div>
        <div class="col col2"></div>

        <div class="col-trigger white">
            <a href=""> Welcome </a>
            <a href="" >Lecture 1 </a>
        </div>
        <div class="col col3"></div>


        <div class="col-trigger green">
            <h3> Work Due </h3>
        </div>
        <div class="col col4"></div>

    </div>
    <div class="row">
        <div class="col-trigger white"><p> Week 2</p></div>
        <div class="col col1"></div>

        <div class="col-trigger green">
            <ul>
                <li> Javascript functions </li>
                <li> Built in Global Functions </li>
            </ul>
        </div>
        <div class="col col2"></div>

        <div class="col-trigger white">
            <a href=""> Lecture 2 </a>
        </div>
        <div class="col col3"></div>

        <div class="col-trigger green"></div>
        <div class="col col4"></div>

    </div>
    <div class="row">
        <div class="col-trigger white"></div>
        <div class="col col1"></div>
        <div class="col-trigger green"></div>
        <div class="col col2"></div>
        <div class="col-trigger white"></div>
        <div class="col col3"></div>

        <div class="col-trigger green"></div>
        <div class="col col4"></div>



    </div>
    </div>


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