When utilizing the :hover-attributes and selecting (left mouse button held) a cell while moving the cursor across other rows, only the initially clicked row will be highlighted on hover:
table {
border-collapse: collapse;
}
td {
width: 40px;
height: 10px;
border: 1px solid #999;
}
tr:hover {
background-color: #d7d7d7;
}<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>In IE and FF browsers, all rows are highlighted as expected. Is this a Chrome issue? How can consistency be achieved across all major browsers?
If you encounter a cross-cursor while attempting to replicate the issue, try again a few times.