Add border with mouse

Question

I want to have a table border (which I can set using css, not inline border = attribute) to set the border: 1px solid black; when I hang a table on the table.

How do I do this in jQuery. I think that it is identical to what happens with the buttons at the top of this page (questions, tags, users, etc.), except that it is a div with a change in the background color, while I want to change the border tables. But the concept is the same.

Answer 1

To hang effects, jQuery provides a hover () pseudo-event that behaves better than moueseenter / mouseleave. In addition, it is recommended to create a CSS class for each state (normal and hovering), and then change the class on hover:

$(document).ready(function() {
    $("#tableid").hover(
        function() { $(this).addClass("Hover"); },
        function() { $(this).removeClass("Hover"); }
    );
});

Your CSS might look like this:

table.Hover { border: 1px solid #000; }

Answer 2

It might be better to replace the classes with a table instead of directly editing CSS properties - this will be a more scalable / extensible solution:

table {
   border:0;
}

table.border {
   border:1px solid #000;
}

Of course, your table will “jump” at 1px when a border is added, so it might be better to use a border or a white border when you are not hanging:

table {
   border:1px solid #fff;
}

table.border {
   border:1px solid #000;
}

Or best of all, if you don't need to be compatible with IE6, you can do all this with pure CSS:

table {
   border:1px solid #fff;
}

table:hover {
   border:1px solid #000;
}

This will be the best / easiest / scalable approach!

Answer 3

mouseenter mouseleave.

$("table#mytable").mouseenter(function(){
      $("table#mytable",this).css("border", "solid 1px black");
    }).mouseleave(function(){
      $("table#mytable",this).css("border", "o");
    });

Answer 4

As an alternative, the "outline", unlike the "border", will not take up extra space in the layout of the elements.