我有一个应用于表格行的悬停转换过渡。当您将其悬停时,子表格单元格似乎保持悬停状态,直到变换过渡结束。它似乎只发生在Chrome中。
table {
width: 70%;
margin: auto;
}
.summary {
cursor: pointer;
-webkit-transition: -webkit-transform linear .3s;
transition: transform linear 0.5s;
}
.summary td {
background: #fff;
}
.summary:hover {
-webkit-transform:scale(1.03);
-ms-transform:scale(1.03);
transform:scale(1.03);
}
.summary:hover td {
color: #fff;
background: #1795EA;
}
<table>
<tr>
<th>ID</th>
<th>Username</th>
<th>Name</th>
<th>Email</th>
</tr>
<tr class="summary">
<td>897689789789</td>
<td>username</td>
<td>2323233</td>
<td>name@address.com</td>
</tr>
<tr class="summary">
<td>897689789789</td>
<td>username</td>
<td>2323233</td>
<td>name@address.com</td>
</tr>
<tr class="summary">
<td>897689789789</td>
<td>username</td>
<td>2323233</td>
<td>name@address.com</td>
</tr>
</table>