Question

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.

Answer 1

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
}