avoid all mouse over, focus highlight CSS/jQuery

Question

I have a requirement where i shall avoid only mouse over highlight onto the rows of table.

Whether, the highlight shall be there when i am using tab key to navigate through the rows.

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

For highlight, i have written below rule

table tr:hover{
  background: yellow
}  

JS fiddle link is here

No highlight shall happen on mouseover but shall happen on using TAB..

Answer 1

Here's a pure HTML/CSS example. You can simply use the pointer-events: none property, and then style the row on :focus rather than :hover .

Here's a fiddle with two examples:

• 1st will allow you to either click or tab through the options.
• 2nd will only allow you to tab through them.

Fiddle

Answer 2

Using :focus in conjunction with setting tabindex attributes on your rows should do the trick. I've included a Fiddle here: https://jsfiddle.net/3zsc7nok/

EDIT

You can use a bit of jQuery to prevent the default browser action on mousedown for the rows in order to prevent the highlighting by mouse action:

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

Updated Fiddle here: https://jsfiddle.net/s00xgt2s/

Answer 3

Instead of using plain Css why dont you try using jquery? Something like this

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

Please tell me if it works.