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>