在懸停（jQuery或CSS）上更改表格行顏色（jQuery或CSS）

Question

我的問題是我已經在我的表格中獲得了一些「突出顯示」（意味着它們有自己的背景顏色來突出顯示它們）單元格，背景顏色當我使用代碼來改變整個行的顏色時，鼠標在他們上面越過。

在一行上盤旋只會改變未突出顯示的單元格的背景顏色。

我該如何解決這個問題，讓整行改變背景顏色？

我有了這個HTML表：

$(window).load(function() { 
 
    $('#infotable tr').hover(function() { 
 
    $(this).addClass('hover'); 
 
    }, function() { 
 
    $(this).removeClass('hover'); 
 
    }); 
 
});

#infotable td { 
 
    padding:0.7em; 
 
    border:#969696 1px solid; 
 
} 
 
.highlight { 
 
    background:#DAFFD6; 
 
} 
 
.hover { 
 
    background:yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th></th> 
 
     <th>Column 1</th> 
 
     <th>Column 2</th> 
 
     <th>Column 3</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody id="infotable"> 
 
    <tr> 
 
     <td>Row #1</td> 
 
     <td>889 kg</td> 
 
     <td class="highlight">151 kg</td> 
 
     <td>192 kg</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Row #2</td> 
 
     <td>784 kg</td> 
 
     <td>15 kg</td> 
 
     <td class="highlight">64 kg</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

可以在CSS獨自實現這一目標。您只需要使:hover規則比td.highlight更具體。試試這個：

#infotable tr:hover td, 
#infotable tr:hover td.highlight 
{ 
    background:yellow; 
} 

Example fiddle

Answer 2

添加類懸停所有td insted的的tr僅改變的JavaScript。

$('#infotable tr').hover(function() 
    { 
    $(this).find('td').addClass('hover'); 
    }, function() 
    { 
    $(this).find('td').removeClass('hover'); 
    }); 

FIDDLE

Answer 3

剛剛從懸停繼承風格檢查這個Fiddle

.hover, .hover .highlight 
{ 
    background:yellow; 
} 

Answer 4

在CSS試試這個

#infotable tr td:hover 
{ 
    background:yellow; 
}