突出顯示錶格行

我正在使用jquery來突顯表格行。這裏是我的代碼：突出顯示錶格行

$('table#results tr').mouseover(function() { 
    var color = $(this).css("background-color") 
$(this).css("background-color","yellow !important"); 
}).mouseout(function() { 
$(this).css("background-color", ""+color+" !important"); 
});

我的目標是保持行的原始顏色變量。在mouseout方法中不能訪問顏色變量（我相信是因爲範圍規則）。我的問題是如何做到這一點顏色var可以在mouseout方法中訪問？

來源

2012-01-23 objlv

您應該在外部CSS選擇器中聲明原始顏色，並使用jQuery對其進行更改，這樣您就不需要保留以前的顏色。它也讓你的HTML更少。 –

如果您只需突出顯示懸停行使用CSS，則完全不需要javascipt。 – dfsq

改爲添加一個類，然後在不需要時刪除它。

$(function() { 
    $('table#results tr').hover(function() { 
     $(this).addClass('hover'); 
    }, function() { 
     $(this).removeClass('hover'); 
    }); 
});

然後在CSS：

.hover { background-color: yellow !important; }

來源

2012-01-23 14:21:18

這可以用純CSS，這在我看來是一個更好的解決方案來實現：

table#results tr:hover td { 
    background-color: yellow; 
}

僅僅因爲你添加：懸停到一個選擇器，這並不意味着選擇器鏈必須停在那裏。這是突出顯示錶格行的一種不錯而且更簡潔的方式，而不是使用JavaScript和類來完成所有這些瘋狂的事情，只是爲了懸停的表格單元格添加背景。

來源

2012-01-23 14:27:22

突出顯示錶格行

回答

相關問題