使用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上添加边框？

回答

相关问题