Javascript Html、css：在悬停时更改行的边框颜色_Javascript_Html_Css

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

javascript html css

Javascript Html、css：在悬停时更改行的边框颜色,javascript,html,css,Javascript,Html,Css,我正在使用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:h

我正在使用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;
}

有人知道怎么做吗？

jsIDLE:

您不能为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>

您可以这样做：

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

请参见此处：

您不能在tr上设置边框，因此需要在td元素上设置边框

首先，设置带有不可见边框的默认状态-此规则将应用于具有dataTable和hover类的表：

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

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

通常，在设置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.偶数：悬停td等。

可以使用border collapse属性：

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

完整代码：

我们还需要查看HTML。您的HTML代码是什么样子的？请发布并制作一个JSFIDLE。@Shomz@i警告外星人请不要在工作中使用JSFIDLE，一个名为Stack Overflow Snippets的新功能已发布。这将只更改一个单元格的边框。我忘记添加td。请重试：它仍然只更改一个单元格的边框。很抱歉，您没有发布任何html，因此我不知道您在何处使用多个单元格。请发布您的html。html中的一行没有边框，您是否真的在抱怨示例末尾缺少一个>a，您在这里有何帮助？为什么这会使表的行移动笨拙？因为边框正在添加到元素中。早期的样式声明之一是重写border声明.dataTable.hover td并仅显示顶部边框。正如我所说的，在设置规则时最好不要指定太多的选择器，因为您可能会意外地使声明非常具体，这使得在不使用类似于！重要提示。如果我使用table.dataTable tbody tr td{border top:1px solid transparent；border bottom:1px solid transparent；}我的旧边框将消失，如果我不这样做，我的行将奇怪地移动啊，对不起，请仅使用边框底部以及顶部和底部进行悬停。看看这个。我只改变了颜色1px固体rgb192，220，255；你明白我说的双边框是什么意思吗？它出现在底部边框上，如果你发现了什么，请告诉我。。。因为我真的尝试了我能想到的一切。。。

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