Add a border to a table's tr on hover with JQuery?

Please, is it possible to add a border to a table's tr on hover with JQuery?

I mean,

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

And if this works, how do I create a 1px invisible border that is set on each 开发者_运维技巧tr so that when I hover, the tr doesn't jump because a 1px border has just been added.

I agree with @David Dorward, you don't really need jQuery for this. But assuming you want to do something more complicated such as fade in "#doc_options", this should get you started:

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
}

There are several ways:

Use a transparent border as David suggests in his comment

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

Set a padding of at least 1px and subtract that 1px when showing the border:

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

Use outline instead (unsupported by IE < 8):

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

EDIT: In all cases it's better to put the styling in the style sheet as thirtydot suggests.