CSS 表行边框颜色与边框折叠

Question

我在这里看到了几篇关于这个主题的帖子，并且我已经阅读了关于边框样式冲突解决的 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');
    });

Answer 1

首先，你最好不要使用 jQuery，而使用纯 CSS：

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

接下来，由于你使用的是 1px 边框，请尝试这个技巧：

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

因为 double 比 solid< 更明显” /code>，它的颜色优先于它周围的单元格，而且无论如何看起来都与 solid 相同;)