Positionieren Sie einen Rahmen um fokussiertes Element

Question

Ich möchte, dass das fokussierte Element (meist mit der Tab-Taste Navigation) mit einem umgebenden Rechteck die Größe des Elements erscheint. Ich habe das passende div in html mit der entsprechenden css für border color und einem display none am Anfang der Navigation erstellt. Ich versuche, die Anzeige mit jquery (die Größe und die Position) zu ändern, aber etwas läuft falsch.

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()); 
}); 

Die Position abrufen von jQuery (this) ist richtig, aber wenn ich es auf Offset, so scheint es, den Wert hinzuzufügen anstatt sie zu ersetzen. Fehle ich etwas? Ist das der richtige Weg, um es zu verwalten (eine vollständige CSS-Lösung mit Pseudo-Element: Fokus funktioniert nicht, da der Rahmen der Elementgröße hinzugefügt wird und die Seitenanzeige zerstört, der Rahmen muss eine Animation haben)?

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

Vielen Dank für jede Hilfe

Answer 1

Ich denke, ich habe die Lösung gefunden, aber ich verstehe nicht, warum es so ist. Ich stelle das Ausblenden vor der Variableneinstellung ein und es scheint zu funktionieren.

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

Sie können einen grundlegenden CSS-Selektor :focus verwenden, ohne JQuery zu verwenden. Weitere Informationen finden Sie unter W3Schools.

Sie müssen dem Element einen Rahmen mit derselben Größe geben, bevor es fokussiert wird, Sie können ihm die gleiche Farbe wie dem Hintergrund geben. Andernfalls nimmt der Rahmen zusätzlichen Platz ein und zerstört Ihr Layout, wie erklärt here. Sie können auch die margin auf 2px setzen und sie entfernen, wenn das Objekt fokussiert ist, so dass es immer noch vergrößert wird.

Überprüfen Sie diese Geige, um zu sehen, was ich meine: jsfiddle.net/GillesCoeman/30vhjtdh/3. Es verwendet auch CSS transition, um den Effekt hinzuzufügen.

Wenn dies nicht genau das ist, was Sie suchen, können Sie auch eine Kombination aus diesem und jQuery verwenden.