Question

I’ve seen several posts here on the subject, and I’ve read the W3C spec on border style conflict-resolution (and admit, I don’t fully get it), and I’m not sure how to achieve what I want.

On row hover, I want to change the color of the border around the row. I have surmised the best cross-browser way to do it is change the td border colors in that row. However, I can’t seem to execute it in a way where the row’s top border also changes.

Here’s my 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;}

and my 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');
    });

Answer 1

Firstly, you might be better off not using jQuery and instead using pure CSS:

#datagrid tr.datarow:hover td {
    border: whatever;
}

Next, since you’re using 1px borders, try this trick:

#datagrid tr.datarow:hover td {
    border-style: double;
}

Since double is “more distinct” then solid, its colour takes precedence over cells around it, and looks identical to solid anyway 😉