javascript - HTML，CSS : Change a row's border colow on hover

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/