Mouseover Mouseout not work in firefox

Problem

i have textbox inside div .cshtml view page

@if(Model.WorkFlowValue=="Qualified" || Model.WorkFlowValue=="Not Qualified")
{
<div id="textboxWorkFlow">
@Html.TextBoxFor(m => m.WorkFlowValue, new { @class = "col8 last right status-field", disabled = "disabled" })
</div>
}
else
{
@Html.TextBoxFor(m => m.WorkFlowValue, new { @class = "col8 last right status-field", disabled = "disabled" })
}

in javascript mouseover event fire successfully in google Chrome but fail in FireFox.

$(document).ready(function(){
$("#textboxWorkFlow").mouseover(function(){
console.log('Mouse In');
}).mouseout(function(){
console.log('Mouse Out');
});
});

Rendered controls in Browser

<div id="textboxWorkFlow"> <input id="WorkFlowValue" class="col8 last right status-field" type="text" value="Qualified" name="WorkFlowValue" disabled="disabled"> </div>

Fiddle please test in Firefox. http://jsfiddle.net/NLT8p/143/

Problem courtesy of: azhar_SE_nextbridge

Solution

I find out the solution firefox encountered a bug http://bugs.jquery.com/ticket/11382

disable property is not working with firefox just use readonly property instead of disable.

@if(Model.WorkFlowValue=="Qualified" || Model.WorkFlowValue=="Not Qualified")
{
<div id="textboxWorkFlow">
@Html.TextBoxFor(m => m.WorkFlowValue, new { @class = "col8 last right status-field", @readonly = "true" }) //replace disabled with readonly
</div>
}
else
{
@Html.TextBoxFor(m => m.WorkFlowValue, new { @class = "col8 last right status-field", @readonly = "true" })
}
Solution courtesy of: azhar_SE_nextbridge

Discussion

created this fiddle to replicate your problem

$(document).ready(function(){
$("#textboxWorkFlow").mouseover(function(){
alert('Mouse In');
}).mouseout(function(){
alert('Mouse Out');
});
});

this works for me in all browsers http://jsfiddle.net/65ak7/

please check if there are not two elements on the page with same id.

Discussion courtesy of: Maneesh Gautam

I suggest you to try to use mouseenter instead of mouseover and mouseleave instead of mouse out

$("#textboxWorkFlow").mouseenter(function() {

});

$("#textboxWorkFlow").mouseleave(function() {

});
Discussion courtesy of: v2solutions.com

Try this

$(document).ready(function(){
   $("#textboxWorkFlow").on("mouseenter",function(){
       alert('mouse In');
    }).on("mouseleave",function(){
       alert('Mouse Out');
    });
});

Working JSFiddle

EDIT As per our discussion, it is found that mouse event does not work for disabled inputs. See This

There is a work around like below. need to use div with absolute position.

<div id="textboxWorkFlow" style="position:relative;">
<input type="text" id="workflow" disabled="disabled"/>
    <div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>

Working JSFiddle for Disabled Input

Discussion courtesy of: Bhushan Kawadkar

This recipe can be found in it's original form on Stack Over Flow.