Question

我正在努力＆＃34;复制＆＃34; http://grooveshark.com/#!/album/Halo+LP/5904939此表就在这里这是我的尝试http://jsfiddle.net/d1zqsayh/25/
我的代码出现问题的方法是，当你将鼠标悬停在<tr>上并且底部边框为双倍（2px从1开始）时我尝试在我的代码中添加border-collapse: collapse;并没有将其修复为建议的堆栈溢出帖子也许我做错了。
有人可以尝试使这项工作？
我把所有重要的.css行放在前63行。

注意：我正在使用DataTables

Answer 1

Grooveshark不使用表格布局，对于每行<div>的上边距，它们都有-1px，因此在悬停时它会与上面的行重叠。

您可以使用element+element 相邻的兄弟选择器来实现相同的功能。首先，只使用顶部边框并在悬停时使用元素+元素选择器更改下一行的边框颜色：

table.dataTable tbody tr td{
  border-top: 1px solid #dddddd;
}

table.dataTable tbody tr:hover td {
    border-top: 1px solid rgb(192, 220, 255);
}

table.dataTable tbody tr:hover + tr td {
    border-top: 1px solid rgb(192, 220, 255);
}

示例：http://jsfiddle.net/d1zqsayh/26/

Html，css：表格行上的双边框

1 个答案: