在焦点元素周围放置边框

Question

I want that the focused element (mostly using the tab key navigation) appears with a surrounding rectangle the size of the element. I created the appropriated div in html with the appropriate css for border color and a display none at the beginning of the navigation. I am trying to change the display with jquery (the size and the position) but something is going wrong.

jQuery('*').focus(function () {
    var position = jQuery(this).offset();
    var width = jQuery(this).width();
    var height = jQuery(this).height();
    console.log(jQuery(this).width(), jQuery(this).height(), position);
    jQuery('#focuser').fadeOut(0); //to have the div disappear if it is on other element
    jQuery('#focuser').css({width: '2px', height: '2px'}); //to get an enlarging effect
    jQuery('#focuser').offset({top: position.top, left: position.left});
    jQuery('#focuser').fadeIn(100, function () {
        jQuery('#focuser').animate({width: width, height: height}, 200);
    });
    console.log(jQuery('#focuser').width(), jQuery('#focuser').height(), jQuery('#focuser').offset());
});

The position retrieve of jQuery(this) is correct but when I set it to offset, it seems to add the value instead of replacing it. Am I missing something ? Is that the correct way to manage it (a full css solution with pseudo element :focus does not work as the border is added to the element size and destroys the page display, the border needs to have an animation ) ?

#focuser {
   border: 2px $second-font-color solid;
   display: none;
   position: absolute;
}

Thanks for any help

Answer 1

I think I found the solution but I do not understand why it is like that. I put the fadeout before the variables setting and it looks to work.

jQuery('*').focus(function () {
    jQuery('#focuser').fadeOut(0);
    var position = jQuery(this).offset();
    var width = jQuery(this).width();
    var height = jQuery(this).height();
    jQuery('#focuser').fadeIn(0);
    jQuery('#focuser').css({width: 0, height: 0});
    jQuery('#focuser').offset({top: position.top, left: position.left});
    jQuery('#focuser').animate({width: width, height: height}, 200);
});

Answer 2

You can use a basic css :focus selector without using JQuery. See W3Schools for more info.

You'll need to give a border of the same size to the element before it's focused, you can give it the same color as the background. Otherwise the border will take extra space and destroy your layout as explained here . You can also set the margin to 2px and remove it when the item is focused, that way it still enlarges.

Check this Fiddle to see what I mean: jsfiddle.net/GillesCoeman/30vhjtdh/3 . It also uses CSS transition to add the effect.

If this is not exactly what you are looking for you could also use a combination of this and jQuery.