My issue is with selecting and highlighting td elements in IE. I am unable to highlight all td elements in a tr using tr:active, although this works correctly in FireFox and Chrome. You can view an example on JsFiddle here. Can someone help me identify if there's an error in the CSS code?
The problem persists across various browsers such as Chrome, Safari, Opera, and FF...
HTML
<body>
<br />
<div id="rowCount">
<table class='t2'>
<tr>
<th>Clicking a cell should highlight all cells in the row</th>
</tr>
<tr>
<td>tr:active td</td>
<td>td:active</td>
</tr>
</table>
</div>
</body>
CSS
table {
cursor: default;
border: 1px solid black;
background-color: transparent;
}
div {
z-index: 0;
display: block;
border:4px solid #CC3300;
width: 80%;
background-color: #4D70DB;
}
th{
text-align: left;
}
td{
border: 1px solid #000000;
}
tr:hover td {
border:1px solid #CC3300;
}
tr:active td{
background-color: #CC3300;
}
td:active {
color: aqua;
}