CSS Table Row border color with border-collapse

Я видел здесь несколько сообщений на эту тему, читал спецификацию W3C по разрешению конфликтов стилей границ (и признаюсь, не до конца ее понял), но не уверен, как добиться желаемого.

При наведении на строку я хочу изменить цвет границы вокруг строки. Я предположил, что лучший кроссбраузерный способ сделать это - изменить цвет границы td в этом ряду. Однако я не могу выполнить это таким образом, чтобы верхняя граница строки также изменилась.

Вот мой CSS:

#dataGrid table {
border: 1px solid #cacac8; /* I've tried it with and without this border setting */
table-layout: fixed;
border-collapse: collapse;
}

#dataGrid td {
    border: 1px solid #cacac8;
    padding: 8px 11px 7px 11px;
    text-align: left;
}

#dataGrid .cellHovered {
    border-top: 1px solid #425474;
    border-bottom: 1px solid #425474;
}

#dataGrid .cellFirstHovered {border-left: 1px solid #425474;}
#dataGrid .cellLastHovered {border-right: 1px solid #425474;}

и мой JQuery:

$('div#dataGrid tr.dataRow').hover(
        function () {
            $(this).children('td').addClass('cellHovered');
            $(this).children('td:first').addClass('cellFirstHovered');
            $(this).children('td:last').addClass('cellLastHovered');
        },
        function() {
            $(this).children('td').removeClass('cellHovered');
            $(this).children('td:first').removeClass('cellFirstHovered');
            $(this).children('td:last').removeClass('cellLastHovered');
    });