Html，css：在懸停時更改行的邊框顏色

-1

我正在使用DataTables，我試圖將行的頂部和底部邊框更改爲行懸停上的紅色。以下沒有改變顏色。Html，css：在懸停時更改行的邊框顏色

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/

來源

2014-10-05 rez

我們需要看到HTML也是如此。 – Shomz 2014-10-05 14:47:05

你的html代碼是什麼樣的？請發佈它，並製作一個jsfiddle。 – 2014-10-05 14:47:17

@Shomz @i驚動外星人http://jsfiddle.net/d1zqsayh/ – rez 2014-10-05 14:56:07

你可以做這樣的事情：

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/

來源

2014-10-05 15:04:12 Shomz

如果我使用'table.dataTable tbody tr td {border = 1px：1px solid transparent; border-bottom：1px solid transparent; }'我的舊邊框不見了，如果我不行，我的行很奇怪地移動 – rez 2014-10-05 15:16:00

啊，對不起，只用邊框底部，懸停的頂部和底部。 http://jsfiddle.net/d1zqsayh/21/ – Shomz 2014-10-05 15:21:07

哦哇，這讓我瘋狂:)謝謝很多 – rez 2014-10-05 15:25:19

你不能設置一個邊界的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>

來源

2014-10-05 14:52:45

這隻會改變一個單元格的邊框。 – JJJ 2014-10-05 14:53:44

我忘了再次添加td嘗試:) – 2014-10-05 14:53:56

它仍然只會更改一個單元格的邊框。 – JJJ 2014-10-05 14:54:17

你可以不在tr上設置邊框，因此您需要將其設置在td元素上。

首先，設置默認狀態爲「無形」的邊界 - 此規則將適用於表與類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

一般情況下，最好不要當setti指定太多的選擇ng 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等

來源

2014-10-05 15:04:24

爲什麼這會使桌子的行動笨拙？ – rez 2014-10-05 15:15:24

因爲邊框正被添加到元素中。其中一個較早的樣式聲明是覆蓋邊界聲明'.dataTable.hover td'，並僅顯示頂部邊界。正如我所說的，最好不要在設置規則時指定太多的選擇器，因爲你可能會意外地做出一個非常具體的聲明，這會使得很難重寫而不使用像'！ important'。 – 2014-10-06 08:24:44

這是可能的邊界崩潰屬性：

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

全碼：http://jsfiddle.net/hkmgk3uf/

來源

2014-10-05 15:17:21 bigmaster

Html，css：在懸停時更改行的邊框顏色

回答

相關問題