使用JQuery在表格的tr上添加邊框？

請問，是否可以添加一個邊界到表格的tr懸停與JQuery？使用JQuery在表格的tr上添加邊框？

我的意思是，

$("#table tr").hover(function() 
{ 
$(this).css("border","1px solid #6da8dc"); 
$("#doc_options").show(); 
},function() 
{ 
$(this).css("border","none"); 
$("#doc_options").hide(); 
});

而且如果這個工程，我如何創建一個每個TR設置1px的無形的界限，這樣，當我將鼠標懸停時，TR不跳，因爲1px的邊框有剛被添加。

來源

2011-02-28 Shoppyonline

'#table tr {border：1px solid transparent; } #table tr：hover {border：1px solid＃6da8dc; ''？ – Quentin 2011-02-28 14:47:02

css可以像大衛一樣做這個... – 2011-02-28 14:50:40

請注意，當涉及到IE時，你會遇到tr邊界問題。不是任何人都應該關心。 – Bergius 2011-02-28 15:04:37

我同意@David Dorward，你並不真的需要這個jQuery。但是，假設你想要做更復雜的東西，如淡入"#doc_options"，這應該讓你開始：

http://jsfiddle.net/jm3kY/

$("#table tr").hover(function() { 
    $(this).addClass('trHover'); 
    $("#doc_options").show(); 
}, function() { 
    $(this).removeClass('trHover'); 
    $("#doc_options").hide(); 
});

CSS：

#doc_options { 
    display: none 
} 
#table tr { 
    border: 1px solid transparent 
} 
#table .trHover { 
    border: 1px solid #6da8dc 
}

來源

2011-02-28 14:50:33 thirtydot

謝謝thirtydot – Shoppyonline 2011-02-28 15:23:27

我還有一個問題@thirtydot [jsfiddle.net/shoppyonline/QMfCp/7/](http://jsfiddle.net/shoppyonline/QMfCp/7/）tr .Hover似乎不工作。 – Shoppyonline 2011-03-01 07:34:42

@Shoppyonline：在那個jsFiddle上，你忘了把左邊的「Framework」選項改爲「jQuery 1.5.1」。它會在你做完之後起作用。 – thirtydot 2011-03-01 10:06:49

有幾種方法：

David在他的評論中建議使用透明邊框

$("#table tr").hover(function() { 
    $(this).css("border","1px solid #6da8dc"); 
},function() { 
    $(this).css("border","1px solid transparent"); 
});

組的至少1px的填充，並且減去1像素表示的邊界時：

$("#table tr").hover(function() { 
    $(this).css({"border": "1px solid #6da8dc", "padding: 4px"}); 
},function() { 
    $(this).css({"border": "none", "padding: 5px"}; 
});

使用outline代替（由IE < 8不支持）：

$("#table tr").hover(function() { 
    $(this).css("outline","1px solid #6da8dc"); 
},function() { 
    $(this).css("outline","none"); 
});

編輯：在所有情況下，最好將樣式放入樣式表中，就像十三點表示的那樣。

來源

2011-02-28 15:00:02 RoToRa

是的，這是我最初做的。看起來我會回到那個。謝謝 – Shoppyonline 2011-02-28 15:24:31

使用JQuery在表格的tr上添加邊框？

回答

相關問題