javascript - 避免所有鼠标悬停，重点突出 CSS/jQuery

Question

我有一个要求，我应该避免只将鼠标悬停在表格的行上。

当我使用 tab 键浏览各行时，是否会出现高亮。

<table>
   <tr><td>Row1</td></tr>
   <tr><td>Row1</td></tr>
   <tr><td>Row1</td></tr>
</table>

为了突出显示，我在下面写了规则

table tr:hover{
  background: yellow
}  

JS fiddle 链接是 here

鼠标悬停时不会高亮，但使用 TAB 时会高亮..

Answer 1

这是一个纯 HTML/CSS 示例。您可以简单地使用 pointer-events: none 属性，然后在 :focus 而不是 :hover 上设置行样式。

这是一个有两个例子的 fiddle :

• 1st 将允许您单击或选择选项。
• 2nd 将只允许您通过 Tab 键浏览它们。

Fiddle