Menu
I can select and highlight td elements in IE but cannot highlight all td in a tr using tr:active. This works as expected in FireFox and Chrome. Here is a JsFiddle example, am I doing something wrong in the CSS?
Still doing it...
In Chrome, Safari, Opera and FF...
HTML
<body>
<br />
<div id="rowCount">
<table class='t2'>
<tr>
<th>Click a Cell should highlight all 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;
}
689
This is correct, the tr:active is not working on IE11 and below. I have not tested on the Edge browser yet, but this is clearly a bug. It can be reproduced in IE9, 8, 7 as well.
After doing a bit of research, I found that most other browsers had this bug too before. See that bug report on Firefox (exactly the same problem).
I searched Microsoft Connect and did not find a bug report that was reporting exactly your problem. I created a new bug report that you can follow using this link.
Like some said in the comments of the topic post, another post on Microsoft Connect was also strongly related, you can follow this bug report here.
Thank you for pointing that out. It is a really good find.
PS: That is sadly the maximum I can do. Later today I will test on Edge to see if this problem is resolved on this new browser.
UPDATE
The Microsoft Edge Team contacted me to add: "This issue appears to be fixed in MS Edge."
190
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
