Question

我有一个带产品图片的div。当用户通过按Tab或鼠标来到这个div时，我会显示一个叠加div以及一些链接和按钮。

问题：当使用某些链接/按钮打开叠加层窗口时，不会为叠加层的按钮元素维护tabindex。

所以我想在打开覆盖窗口时将焦点切换到覆盖可聚焦元素。当tabindex到达最后一个元素时，它应该移动到覆盖窗口外的另一个可聚焦元素。

HTML代码

<h2><a href="">tab 1</a></h2>
<h2><a href="">tab 2</a></h2>

<div class="container">
 <a href=""><img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image" style="width:100%"></a>
  <div class="middle-overlay" style="display: none;">
    <button>Tab 3</button>
    <button>Tab 4</button>

  </div>

</div>
 <h2><a href="">tab 5</a></h2>
  <h2><a href="">tab 6</a></h2>

 $('.container').on('mouseover focusin', function() {
            $('.middle').show();
        })

        $('.container').on('mouseout focusout', function() {
            $('.middle').hide();
        })

我的JS小提琴：https://jsfiddle.net/pnz7Levn/13/

Answer 1

它不会专注于容器内的项目，因为您使用的是display：none。不使用display none隐藏元素，您可以使用仅限sr的类，只需在焦点内外添加和删除该类。这是代码：

CSS：

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

HTML：

<h2><a href="" tabindex="0">tab 1</a></h2>
<h2><a href="">tab 2</a></h2>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image" style="width:100%" tabindex="0">
<div class="middle sr-only">
    <button class="first">Tab 3</button>
    <button>Tab 4</button>
</div>
</div>
<h2><a href="">tab 5</a></h2>
<h2><a href="">tab 6</a></h2>

jQuery：

$('.container').on('mouseover focusin', function() {
  $('.middle').removeClass('sr-only');
})
$('.container').on('mouseout focusout', function() {
  $('.middle').addClass('sr-only');
})

jQuery：tabindex没有为overlay div的可聚焦元素维护

1 个答案: