jQuery 带有边框折叠的 CSS 表格行边框颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7942212/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Table Row border color with border-collapse
提问by Gregir
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.
我在这里看到了几篇关于这个主题的帖子，我已经阅读了 W3C 关于边框样式冲突解决的规范（承认，我不完全明白），我不知道如何实现我想要的.
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.
在行悬停时，我想更改行周围边框的颜色。我推测最好的跨浏览器方法是更改该行中的 td 边框颜色。但是，我似乎无法以行的顶部边框也发生变化的方式执行它。
Here's my CSS:
这是我的 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:
和我的 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');
});
回答by Niet the Dark Absol
Firstly, you might be better off not using jQuery and instead using pure CSS:
首先，您最好不要使用 jQuery，而是使用纯 CSS：
#datagrid tr.datarow:hover td {
border: whatever;
}
Next, since you're using 1px borders, try this trick:
接下来，由于您使用的是 1px 边框，请尝试以下技巧：
#datagrid tr.datarow:hover td {
border-style: double;
}
Since doubleis "more distinct" then solid, its colour takes precedence over cells around it, and looks identical to solidanyway ;)
既然double是“更明显”，那么solid它的颜色优先于它周围的单元格，并且看起来完全相同solid；）
