我已经在这个主题上看到了几个帖子,我已经阅读了关于边框风格冲突解决的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');
});
解决方法
首先,你可能不会使用jQuery而不是使用纯CSS：
#datagrid tr.datarow:hover td {
border: whatever;
}
接下来,由于您使用的是1px边框,请尝试此技巧：
#datagrid tr.datarow:hover td {
border-style: double;
}
由于双倍是“更明显”,那么固体,其颜色优先于周围的细胞,并且看起来与固体一样;)
