jquery 没有为覆盖div的可聚焦元素保留tabindex

5cg8jx4n 于 2022-12-03 发布在 jQuery

关注(0)|答案(1)|浏览(129)

我有一个带有产品图片的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/

jquery

来源：https://stackoverflow.com/questions/43665500/tabindex-not-maintained-for-overlay-divs-focussable-elements

1条答案

按热度按时间

czq61nw11#

它不会将焦点放在容器中的项目上，因为您使用的是display：none。您可以使用sr-only类来代替使用display none隐藏元素，并在焦点进出时添加和删除该类。以下是代码：
CSS：

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

于飞：

<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>

查询：

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

赞(0）回复(0）举报 2022-12-03

我来回答

jquery 没有为覆盖div的可聚焦元素保留tabindex

1条答案

相关问题

热门标签

最新问答