我有一个项目列表（ul，li元素），其中li包含左内容和正确内容。每个li tabindex设置为0。
默认情况下，左侧内容始终可见，当用户鼠标悬停在每个li上时，我正在切换正确内容的可见性。
正确的内容有三个操作图标，tabindex都设置为0。
问题是当我使用键盘TAB键获得焦点在每个li时，我能够在右侧面板中看到动作图标，但是立即按TAB键，我将失去对{的关注{1}}元素，因此右侧操作面板变得不可见，无法使用键盘访问li右侧面板内的元素。
要求：
当我专注于特定的li时，立即按TAB键应该选择li内的动作图标（只有在li元素上有焦点时才可见），而不是跳过动作图标，因为动作图标也将tabindex设置为0。
以下是供参考的示例代码段
li只有在<ul>
<li tabindex="0">
<div class="left-content">
<label>{{cartList.item_name}}</label>
</div>
<div class="right-content">
<div class="actionsBar">
<span class="descriptionIcon" tabindex="0"></span>
<span class="deleteIcon" tabindex="0"></span>
</div>
</div>
</li>
</ul>
<style type = "text/css">
li:hover, li:focus {
cursor: pointer;
background-color: #cccccc;
color: #333333;
}
.right-content {
visibility: hidden;
}
.right-content:hover, .right-content:focus {
visibility: visible;
}
</style>
代码
先谢谢。