javascript - Firefox: mouseover doesn't work while mouse button is pressed -

here i'm trying make: https://gfycat.com/validembarrassedhochstettersfrog

i want highlight of <td> objects in <table> using mouse. video recorded on chrome, works perfectly. unfortunately doesn't on firefox.

here how works:

1. user clicks on first cell in table
2. he drags mouse other cell
3. cells being highlighted

code:

$("#productlist").on("mousedown", "td", function () {    //save start }  $("#productlist").on("mouseover mouseenter mouseover hover", "td", function () {    //update highlighting, modify classes    //this function isn't fired when click on 1 of <td> , drag mouse somewhere else } 

where #productlist <table>.

while in chrome works expected, firefox seem not fire mouseenter event (and other tried). mouseover works on objects i've clicked on. seems firefox considers focused objects when drag using mouse.

how can bypass it?

edit: 1 important thing mention: have <input> in each cell. cause problems https://jsfiddle.net/q8v7f6uv/6/

what version of firefox using? tried replicate in simple manner described, , seems work in ff (47.0.1) , chrome.

on mousedown:

$(this).css("background", "red"); 

on mouseenter:

$(this).css("background", "yellow"); 

https://jsfiddle.net/q8v7f6uv/1/

edit:

after made edit question.. not working in firefox because textbox being 'dragged' in browser, how can highlight text , drag , drop text field.

you can disable functionality css: user-drag: none; , user-select: none; fixes problem. notice css rule added input. https://jsfiddle.net/q8v7f6uv/10/