Gags Gags - 1 year ago 64
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

key to navigate through the rows.


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 Source

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


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) {

Updated Fiddle here: