當鼠標懸停在同一張表的另一行上時，更改表格行的背景顏色

這是我在這裏的第一篇文章，我決不是一個熟練的HTML/CSS/JavaScript程序員，所以如果我不表達自己夠清楚 - 對不起，如果太羅嗦！當鼠標懸停在同一張表的另一行上時，更改表格行的背景顏色

我對錶格內容使用了一個經典的HTML表格，並希望能夠改變不同於我當前懸停的行的背景顏色。

原因是我有很多表被分成「子表」，每個表都有自己的標題和下面的一行或多行。然而，這些子表（所有樣式都相同）不會被編碼爲表格，而只是使用不同的類來對它們進行樣式設置（主要是因爲它們太多而且很小，每行包含1-6行，包括標題）。

我想要做的是，一旦你懸停任何子表，它的標題和你當前指向的行應該改變背景顏色（後者很容易用CSS實現）。感謝網上找到的JavaScript，我設法實現了這一點 - 請參閱sample code這可能更好地解釋了這一點，另請參閱下面的代碼 - 但是，每個子標題都需要一個唯一的ID。（請注意，每個子表都使用一個單獨的tbody - 如果將onMouseover事件應用於每行，則在從一行懸停到另一行時，子標題的顏色將閃爍/關閉 - CSS永遠不會發生這種情況只有使用JavaScript時 - 當然還會創建更多的代碼）。

而不必爲每個子標題分配唯一的標識我想要一個替代使用類的解決方案，因爲每個子表使用同樣的（當然，我會給tbody分配一個班級）。我想這個棘手的部分可能是爲了確保當前子表的頭部受到影響，而不是全部同時進行。如果更容易創建一個解決方案，其中每個子表實際上都被編碼爲一個單獨的表（從語義角度來看，這也可能更好），那麼請這樣做。當然，如果JavaScript自己應用onMouseover等事件，那麼當然會更好，這樣我就不必將它放入每個子表的內聯代碼中 - 我已經看到這可以用於按鈕等。我想這是可能的。

我從來沒有用過jQuery，所以純粹的JavaScript解決方案會更受歡迎。

對於示例代碼再請參閱my fiddle

任何輸入非常感謝！

中的JavaScript：

function changeTo(myId) { document.getElementById(myId).className='sub-header-highlight'; } 
function changeBack(myId) { document.getElementById(myId).className='sub-header'; }

的CSS：在HTML的

thead { color: #FFF; background: #000; } 
.sub-header { color: #FFF; font-weight: bold; background: #F00; } 
.sub-header-highlight { color:# FFF; font-weight: bold; background: #0F0; } 
tr.sub-header:hover { background: #0F0; } /* if JS turned off */ 

.sub-row1 { color: #000; background: #FFF; } 
.sub-row2 { color: #000; background: #EEE; } 
tr.sub-row1:hover, .sub-row2:hover { background: #FF0; }

部分：

<tbody onMouseover="changeTo('sub1');" onMouseout="changeBack('sub1');"> 
    <tr class="sub-header" id="sub1"> 
     <td>Sub-Header 1</td> 
    </tr> 
    <tr class="sub-row1"> 
     <td>Contents of row 1</td> 
    </tr> 
    <tr class="sub-row2"> 
     <td>Contents of row 2</td> 
    </tr> 
    <tr class="sub-row1"> 
     <td>Contents of row 3</td> 
    </tr> 
</tbody>

來源

2012-07-27 Mr Love

你應該把你的代碼放在這裏。 – Mageek 2012-07-27 17:29:41

好吧，我正在嘗試，但無法讓它正常工作，尤其是HTML部分被刪除，將再次嘗試。 – 2012-07-27 17:37:17

如果您查看[編輯幫助頁面]（http://stackoverflow.com/editing-help），它將顯示如何格式化代碼以使其顯示。（用於內聯代碼將其反編譯爲''''，或者代碼塊用空行分隔代碼，之前和之後以及每行縮進四個空格）。 – 2012-07-27 17:39:21

您可以大大簡化你的兩個HTML標記和CSS，而且也沒有必要使用JavaScript。

首先，所有的類都可以走出來，除了你的交替行樣式（除非你根本不在乎IE 8及以下，在這種情況下，你可以拿出IE條件CSS和類名。見browser CSS selector compatibility chart ）
其次，將子標頭內的每個td更改爲th。
第三，使用父tbody上的:hover僞選擇器按指定樣式設置th。

見本working in a jsfiddle，進行測試，以在IE 7和Firefox 14.

這裏完美地工作是CSS：

table { border-collapse:collapse; } 
thead { color: #FFF; background-color: #000; } 

tbody th { color: #FFF; font-weight: bold; background-color: #F00; text-align:left; } 
tbody:hover th { background: #0F0; } 

tbody tr:nth-child(odd) { background-color:#EEE; } 
tbody tr:hover td { background: #FF0; }

風格注：

CSS屬性「背景「預計不僅僅是顏色，還會重置其他屬性。當您想要設計風格時，請使用「背景色」。
tr:hover上的額外td是特殊規則的要求，以使IE使其優先於奇數行的特殊着色。
「奇數」行實際上是偶數的數據，因爲子標頭消耗第一個奇數行。
直接在桌上使用CSS border-collapse:collapse而不是cellspacing。

我不得不把IE的條件CSS放在小提琴的HTML部分，因爲它必須在style標籤之外。

<!--[if lte IE 8]> 
<style type="text/css"> 
    tbody tr.odd { color: #000; background: #EEE; } 
</style> 
<![endif]-->

這裏是HTML。看看它現在有多清潔？

<table> 
    <thead> 
     <tr> 
     <th>MAIN HEADER</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <th>Sub-Header 1</th> 
     </tr> 
     <tr> 
     <td>Contents of row 1</td> 
     </tr> 
     <tr class="odd"> 
     <td>Contents of row 2</td> 
     </tr> 
     <tr> 
     <td>Contents of row 3</td> 
     </tr> 
    </tbody> 
    <tbody> 
     <tr> 
     <th>Sub-Header 2</th> 
     </tr> 
     <tr> 
     <td>Contents of row 1</td> 
     </tr> 
    </tbody> 
    <tbody> 
     <tr> 
     <th>Sub-Header 3</th> 
     </tr> 
     <tr> 
     <td>Contents of row 1</td> 
     </tr> 
     <tr class="odd"> 
     <td>Contents of row 2</td> 
     </tr> 
    </tbody> 
</table>

最後，我意識到色彩很可能只是一個例子，所以我可能會建議鮮豔的原色不會與人的認知反應很好地工作？您可以改爲使用某種高亮效果。請參閱a working example，我使用（對我的眼睛）更加令人愉悅的顏色爲您放置。看看懸停在它上面的那一段「發光」是怎麼樣的？美麗！

注：在IE8之前，會有右側額外的邊框。如果你有一個多列表，並且你喜歡內部邊界的東西，並且想要支持IE8及更低版本，那麼你需要在每行的最後一個單元格中添加一個類，以便刪除右邊界。

來源

2012-07-27 18:10:19 ErikE

很多很多人都感謝，我從未期望能夠儘快得到如此好的答案，因爲它是週五晚上和所有事情（至少在歐洲） - 一旦我有了時間（我現在想完成其他事情），將會更仔細地閱讀這些內容並回復你。 – 2012-07-27 19:08:18

對不起，延遲 - 非常感謝你提供這樣一個乾淨的代碼的解決方案，我在這裏學到了很多東西。我不僅擁有一個漂亮的CSS解決方案來解決我的問題（現在在我的網站上實現並經過測試，可在所有主流瀏覽器+ IE8的最新版本中完美工作） - 我也不必使用內聯類或JavaScript來劃分我的表格（當然除了IE8及以下）！你真的啓發我學習更多關於CSS的知識，因爲我現在意識到比以前知道的更多。（至於顏色我確實使用其他人爲我的網站，但無論如何感謝。） – 2012-08-03 04:03:59

很高興聽到它！ :) – ErikE 2012-08-03 05:00:06

你可以用純CSS實現這一點（與通常的瀏覽器的兼容性因此假設您使用的是相對較新的Chrome，Safari，Firefox，Opera或可能的IE 9（或更高版本）：

tbody:hover tr.sub-header { 
    background-color: #0f0; 
} 

tbody tr.sub-row:hover { 
    background-color: #f90; 
}

JS Fiddle demo（顯然，適應你的口味顏色;這些僅僅是爲了演示的目的）。

這是當然，值得一提的是，一些瀏覽器可能不會顯示tr元素的background-color（因爲它顯示背後的td元素background-color），在這種情況下，你可能需要修改選擇爲目標的相關td元素代替：

tbody:hover tr.sub-header td { 
    background-color: #0f0; 
} 

tbody tr.sub-row:hover td { 
    background-color: #f90; 
}

來源

2012-07-27 17:33:11

你的意思是純* CSS *不* Javascript * :) – jackJoe 2012-07-27 17:35:07

我的確的確如此;我糾正了正如你的評論彈出... =） – 2012-07-27 17:35:29

哇，看起來太棒了！我實際上認爲像這樣的一個看似簡單的任務應該可以用CSS來實現，但只是無法弄清楚......現在將在不同的瀏覽器中在我的頁面上測試它，然後再回到你身邊。（至於舊的IE支持，我不能再真正被困擾了，只要支持懸停，單個行仍然會被突出顯示。） – 2012-07-27 18:07:33

當鼠標懸停在同一張表的另一行上時，更改表格行的背景顏色

回答

相關問題