在Chrome中转换转换结束之前,不会删除表格行悬停状态

时间:2014-12-12 14:39:30

标签: css hover transition tablerow

我有一个应用于表格行的悬停转换过渡。当您将其悬停时,子表格单元格似乎保持悬停状态,直到变换过渡结束。它似乎只发生在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>

0 个答案:

没有答案