避免所有鼠标悬停，焦点突出显示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小提琴链接是here

在鼠标悬停时不会发生突出显示，但在使用TAB时会发生。

Answer 1

这是一个纯HTML / CSS示例。您只需使用pointer-events: none属性，然后在:focus而不是:hover上设置该行的样式。

这里有两个例子：

• 1st允许您点击或标签选项。
• 2nd只允许您通过它们进行制表。

Fiddle

Answer 2

将:focus与行上的tabindex属性一起使用应该可以解决问题。我在这里包含了一个小提琴：https://jsfiddle.net/3zsc7nok/

编辑

您可以使用一些jQuery来阻止行mousedown上的默认浏览器操作，以防止通过鼠标操作突出显示：

$('tr').on("mousedown", function(event) {
  event.preventDefault();
});

此处更新了小提琴：https://jsfiddle.net/s00xgt2s/

Answer 3

而不是使用普通的Css为什么不尝试使用jquery？ 像这样的东西

$("tr").keydown(function (e) {    
  if (e.which == 9) {     
    $(this).css(" background","yellow");
    e.preventDefault();
  }
});

请告诉我它是否有效。