我在这里看过几个关于这个主题的帖子,我已经阅读了关于边界风格冲突解决的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;}
Run Code Online (Sandbox Code Playgroud)
和我的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'); …Run Code Online (Sandbox Code Playgroud)