Gags Gags - 5 months ago 15
jQuery Question

avoid all mouse over, focus highlight CSS/jQuery

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

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/