我在这里看到了一些关于此主题的帖子,也阅读了W3C关于边框样式冲突解决的规范(我承认,我并不完全理解),我不确定如何实现我想要的效果。
当鼠标悬停在行上时,我想改变行周围的边框颜色。我已经推断出最好的跨浏览器方法是更改该行中的td边框颜色。然而,我似乎无法以使行的顶部边框也发生变化的方式执行它。
以下是我的CSS:
当鼠标悬停在行上时,我想改变行周围的边框颜色。我已经推断出最好的跨浏览器方法是更改该行中的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');
});
td
上使用:first-child
和:last-child
选择器来设置侧边框,然后让其余部分仅设置顶部和底部。这样就可以实现了。 - Niet the Dark Absol