css - Tab Index 没有突出显示 li 而不是突出显示里面的 anchor 标记

Question

我有一个 Bootstrap 下拉列表，我可以在其中通过删除 foreach 绑定(bind)动态填充列表项。

每个 li 包含链接(一个标签)，我还有标签 index=0对于所有列表项。 我有 <li> 的样式和 anchor 标记。

当我将鼠标移到 <li> 上时, 它正在改变 <li> 的背景颜色，当我使用选项卡在列表项之间移动时，它不会更改 <li> 的背景颜色而不是我在 anchor 标签上获得标签索引效果。

代码如下。

<li class="lifecycle-state taskpanel-select-option" role="presentation" tabindex= "0">
    <a href="#" role="menuitem">
        <span data-bind="text: StateName"/>
        <span class="lifecycle-stateId" data-bind="text: StateId"/>
    </a>
</li>

Answer 1

您可以使用 CSS 中的 :focus 样式来实现这一点。

a:focus,
a:hover { 
  // Your hover colour here will change the color for both hovering and when focused 
}

祝你好运:)