Question

请问，是否可以在使用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边框。

Answer 1

我同意@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
}

Answer 2

有几种方法：

使用大卫在评论中建议的透明边框

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

设置至少1px的填充，并在显示边框时减去1px：

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

改为使用outline（IE＆lt; 8不支持）：

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

编辑：在所有情况下，最好将样式放在样式表中，如thirtydot所示。

使用JQuery在悬停时向表tr添加边框？

2 个答案: