Question

我正在使用DataTables，我试图在行悬停时将行的顶部和底部边框更改为红色。以下没有改变颜色。

table.dataTable.hover tbody tr:hover,
table.dataTable.hover tbody tr.odd:hover,
table.dataTable.hover tbody tr.even:hover,
table.dataTable.display tbody tr:hover,
table.dataTable.display tbody tr.odd:hover,
table.dataTable.display tbody tr.even:hover {
    background-color: rgba(209, 231, 255, 0.5); 
    border-bottom: 1px solid red;
    border-top: 1px solid red;
}

任何人都知道如何正确地做到这一点？ jsfiddle：http://jsfiddle.net/d1zqsayh/

Answer 1

您可以这样做：

table.dataTable tbody tr td{
    border-bottom: 1px solid transparent;
}

table.dataTable tbody tr:hover td {
    border-top: red 1px solid;
    border-bottom: red 1px solid;
}

请在此处查看：http://jsfiddle.net/d1zqsayh/21/

Answer 2

您无法在tr上设置边框，因此您需要在td元素上设置边框。

首先，使用＆＃34;隐藏＆＃34;设置默认状态。边框 - 此规则适用于包含类dataTable和hover的表：

.dataTable.hover td {
    border: 1px solid inherit;
}

现在，当行悬停时，请指定红色的顶部和底部边框：

.dataTable.hover tr:hover td {
    border-top: 1px solid red;
    border-bottom: 1px solid red;
}

JSFiddle

通常，在设置css规则时最好不要指定太多的选择器。您的选择器非常具体，可以用较短的语句替换，例如

.dataTable tr:hover td {
    background-color: rgba(209, 231, 255, 0.5); 
    border-bottom: 1px solid red;
    border-top: 1px solid red;
}

而不是table.dataTable tbody tr.even:hover td等

Answer 3

您无法设置TR的边框尝试此

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <style>


    .redrow td:hover{
    border-bottom: 1px solid red;
    border-top: 1px solid red;
    }
 </style>

 </HEAD>

 <BODY>
  <TABLE>
  <TR class="redrow">
    <TD>dsfsdfs</TD>
  </TR>
  </TABLE>
 </BODY>
</HTML>

Answer 4

可以使用border-collapse属性：

table, th, td {
    border-collapse: collapse;
}

完整代码：http://jsfiddle.net/hkmgk3uf/

Html，css：在悬停时更改行的边框颜色

4 个答案: