Why only table row is not increasing during hover?

Question

This is my code. I want to make a table. Where when I will hover on .details or .time part, only details and time part will be hover not the day part. And when I will hover on .day part , whole section will be hover. Example: When I will hover on Sunday, three row of .details and .time will be hovered including Sunday. And when I will hover on .details or .time part only that row will be hover except .day part. And also I want That table header will not be hovered in any case.

I tried in many way to fix it but I couldn't fix it.

Please help me to fix it. Thank you in advance. Here is my code:

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>

score 1 · Answer 1 · answered May 11 '21 at 15:29

Request:

Whole section should be hovered when hovering on class .day
When hovering over .details or .time part, only details and time part will be hover not the day part
Table header will not be hovered in any case.

Solution:

According to what i know about child element and parent element in css, it's very difficult to use css to change the style of parent element when hovering over the child element. But this can be achieved by using javascript:

How to style the parent element when hovering a child element?
This can be done by simply removing tr:hover .day:

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

This can also be simply done by adding a not:

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

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

Hope this answers your doubts

Why only table row is not increasing during hover?

1 Answers1