CSS表格行边框颜色与border-collapse属性相关

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');
    });

- Gregir

Answer 1

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

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

接下来，由于您正在使用 1px 边框，请尝试这个技巧：

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

由于double比solid更“独特”，因此它的颜色优先于周围的单元格，并且看起来与solid相同；）

- Niet the Dark Absol

---

我会成为一个厉害的家伙。运行良好。非常感谢。不知道它是否适用于IE 7？ - Gregir

据我所知，是的，它可以正常工作。至少，在IE9的IE7模式下可以工作（根据我的经验似乎相当可靠）。然而，IE6不会喜欢它，但没关系:p - Niet the Dark Absol

嗯...这会在每个单元格周围加上边框。如果我去掉带有CSS hover的td，并只在行周围加上边框，那在IE 7中是否有效？（或者说，在任何版本的IE中是否有效呢？） - Gregir

不确定，但是您可以在td上使用:first-child和:last-child选择器来设置侧边框，然后让其余部分仅设置顶部和底部。这样就可以实现了。 - Niet the Dark Absol

哈哈哈...真是个好招数！我已经寻找解决方案很长时间了。这个一箭双雕的方法解决了我的问题。 - Leniel Maccaferri