0

我有一个带有产品图片的 div。当用户通过按选项卡或鼠标进入此 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/

4

1 回答 1

0

它不会关注容器内的项目，因为您使用的是 display:none。除了使用 display none 隐藏元素，您还可以使用 sr-only 类，只需在焦点输入和输出时添加和删除该类。这是代码：

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');
})
于 2018-04-17T02:38:54.113 回答