html - 无法让悬停在同一位置的不同级别上影响 2 个元素

Question

我正在尝试重新创建一个我感兴趣的网站的副本。我在行中设置了一个 div 表。在行上，我设置了 4 个 div，以列的形式绝对定位，并将显示设置为无。当我将鼠标悬停在行中的一个元素上时，我希望激活该行的悬停效果并为整列激活列效果。我试过选择列位置中的元素 .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>