Question

我希望聚焦元素（主要使用Tab键导航）显示一个与元素大小相关的周围矩形。我在html中使用适当的css创建了适用于边框颜色的div，并在导航开头显示了none。我试图用jquery（大小和位置）来改变显示，但是出了点问题。

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

jQuery（this）的位置检索是正确的但是当我将其设置为offset时，它似乎添加了值而不是替换它。我错过了什么吗？这是管理它的正确方法（带有伪元素的完整css解决方案：焦点不起作用，因为边框被添加到元素大小并破坏页面显示，边框需要有动画）？

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

感谢您的帮助

Answer 1

我认为我找到了解决方案，但我不明白为什么会这样。我将fadeout放在变量设置之前，它看起来有效。

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

您可以在不使用JQuery的情况下使用基本的css :focus选择器。有关详细信息，请参阅W3Schools。

您需要在元素聚焦之前为元素提供相同大小的边框，您可以为其提供与背景相同的颜色。否则，边框将占用额外空间并破坏您的布局，如here所述。您还可以将margin设置为2px，并在项目聚焦时将其删除，这样它仍会放大。

检查这个小提琴，看看我的意思：jsfiddle.net/GillesCoeman/30vhjtdh/3。它还使用CSS transition来添加效果。

如果这不是你想要的，你也可以使用这个和jQuery的组合。

在焦点元素

2 个答案: