避免所有鼠標懸停，突出顯示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小提琴鏈接在這里

鼠標懸停時不突出顯示，但使用TAB時不發生突出顯示。

Answer 1

這是一個純HTML / CSS示例。 您可以簡單地使用pointer-events: none屬性，然后在:focus而不是:hover上設置行的樣式。

這有兩個例子：

• 1st將允許您單擊或瀏覽選項。
• 2nd僅允許您通過它們進行制表。

小提琴

Answer 2

結合使用:focus和在行上設置tabindex屬性可以解決問題。 我在這里加入了小提琴： https : //jsfiddle.net/3zsc7nok/

編輯

您可以使用jQuery的一點，以防止在默認瀏覽器操作mousedown該行以防止通過鼠標操作的高亮：

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

在這里更新了Fiddle： https : //jsfiddle.net/s00xgt2s/

Answer 3

為什么不嘗試使用jquery而不是使用普通的CSS？ 像這樣

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

請告訴我是否可行。