Html，css：在悬停时更改行的边框颜色(Html,css: Change a row's border colow on hover)
我正在使用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;
}
I am using DataTables and i am trying to change the row's top and bottom border to red on row hover. Following didn't change the color.
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;
}
Anyone knows how to properly do this ? jsfiddle: http://jsfiddle.net/d1zqsayh/
原文：https://stackoverflow.com/questions/26203691
2020-02-25 10:02
满意答案
你可以这样做：
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;
}
You can do something like
