为什么只有表格行在悬停期间没有增加？

Question

这是我的代码。我想做一张桌子。当我将鼠标悬停在 .details 或 .time 部分时，只有 details 和 time 部分会悬停 而不是日期 部分。当我将鼠标悬停在 .day 部分时，整个部分将悬停。 示例：当我将在周日悬停时，将悬停三行 .details 和 .time，包括周日。当我将鼠标悬停在 .details 或 .time 部分时，只有该行将悬停，除了 .day 部分。而且我希望该表头在任何情况下都不会悬停。

我尝试了很多方法来修复它，但我无法修复它。

请帮我解决它。先感谢您。 这是我的代码：

table{
    width: 100%;
    background: white;
}
table,tr,td,th{
    border: 2px solid #410d3526;
}
th{
    padding: 20px;
    font-family: 'Kanit', sans-serif;
    text-align: center;
    font-size: 20px;
    letter-spacing: 1px;
    background: #c3143166;
}
th:nth-child(1){
    background: #80808040;
}
th:nth-child(3){
    background: #80808040;
}
.day{
    font-family: 'Itim', cursive;
    font-size: 26px;
    text-align: center;
    background: #80808040;
}
td h3{
    font-family: 'Comfortaa', cursive;
    font-size: 23px;
    margin: 0;
    text-align: center;
    letter-spacing: 1px;
}
td h4{
    font-family: 'Dancing Script', cursive;
    font-size: 20px;
    text-align: center;
    font-weight: bolder;
    margin: 0;
}
td h6{
    text-align: center;
    font-family: 'Comfortaa', cursive;
    font-size: 16px;
}
.time{
    font-family: 'Pangolin', cursive;
    text-align: center;
    font-weight: 600;
    letter-spacing: 1px;
    background: #80808040;
}
tr  .details{
    background:#240b368f ;
    color: white;
}
tr{
    transition: 1s;
}
tr:hover{
    transform: scale(1.02);
}

tr:hover .details,tr:hover .time,tr:hover .day{
    background: linear-gradient(to left, #240b36, #c31431);
    color: white;
    border: none;
}

<section class="routine-sec">
  <div class="container">
      <div class="row">
          <div class="col-xl-2"></div>
          <div class="col-xl-8">
              <table>
                  <tr>
                      <th>DAY</th>
                      <th>Cource</th>
                      <th>TIME</th>
                  </tr>
                  <tr>
                      <td rowspan="3" class="day">Sunday</td>
                      <td class="details">
                          <h3>Programing structure language</h3>
                          <h4>Ditee yasmin</h4>
                          <h6>Cse-510210</h6>
                      </td>
                      <td class="time">11:00am</td>
                  </tr>
                  <tr>
                      <td class="details">
                          <h3>Programing structure language</h3>
                          <h4>Ditee yasmin</h4>
                          <h6>Cse-510210</h6>
                      </td>
                      <td class="time">11:00am</td>
                  </tr>
                  <tr>
                      <td class="details">
                          <h3>Programing structure language</h3>
                          <h4>Ditee yasmin</h4>
                          <h6>Cse-510210</h6>
                      </td>
                      <td class="time">11:00am</td>
                  </tr>

                  <tr>
                      <td rowspan="2" class="day">Sunday</td>
                      <td class="details">
                          <h3>Programing structure language</h3>
                          <h4>Ditee yasmin</h4>
                          <h6>Cse-510210</h6>
                      </td>
                      <td class="time">11:00am</td>
                  </tr>
                  <tr>
                      <td class="details">
                          <h3>Programing structure language</h3>
                          <h4>Ditee yasmin</h4>
                          <h6>Cse-510210</h6>
                      </td>
                      <td class="time">11:00am</td>
                  </tr>
                  <tr>
                      <td class="day">Sunday</td>
                      <td class="details">
                          <h3>Programing structure language</h3>
                          <h4>Ditee yasmin</h4>
                          <h6>Cse-510210</h6>
                      </td>
                      <td class="time">11:00am</td>
                  </tr>

              </table>
          </div>
          <div class="col-xl-2"></div>
      </div>
  </div>
</section>

Answer 1

请求：

1. 在类.day 上悬停时应悬停整个部分
2. 当悬停在.details 或.time 部分时，只有详细信息和时间部分会悬停，而不是日期部分
3. 表格标题在任何情况下都不会悬停。

解决方案：

1. 根据我对css中子元素和父元素的了解，当鼠标悬停在子元素上时，很难使用css来改变父元素的样式。但这可以通过使用 javascript 来实现：

   How to style the parent element when hovering a child element?

2. 这可以通过简单地删除tr:hover .day来完成：

    tr:hover .details, tr:hover .time, {
    background: linear-gradient(to left, #240b36, #c31431);
    color: white;
    border: none;
    }

1. 这也可以通过添加 not 来完成：

    /* Remember to add the class head_row in your table headers */

    tr:not(.head_row):hover {
      transform: scale(1.02);
    }

希望这能解答你的疑惑