Mouseover Mouseout not work in firefox

Question

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/

use mouseenter instead of mouseover and use mouseleave instead of mouseout — Bhushan Kawadkar, May 21 '14 at 05:27

score 1 · Answer 1 · answered May 21 '14 at 05:28

1

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

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

});

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

});

answered May 21 '14 at 05:28

v2solutions.com

1,439
9
8

azhar_SE_nextbridge · Accepted Answer · 2014-06-05T06:48:45.280

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" })
}

score 0 · Answer 3 · edited May 23 '17 at 12:11

0

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

edited May 23 '17 at 12:11

Community

1
1

answered May 21 '14 at 05:30

Bhushan Kawadkar

28,279
5
35
57

I have tried this on firefox and it is working form me. any console errors on browser ... can you share this in jsfiddle – Bhushan Kawadkar May 21 '14 at 05:49
@azhar_SE_nextbridge, i think there is problem with expression inside div, can you pls try same by replace some static text inside div and remove existing. like
Some Text here
– Bhushan Kawadkar May 21 '14 at 05:54
it is working when i try static text as you say but in my scenario i have to render Textbox dynamically after checking the condition like that... i update my question please check – azhar_SE_nextbridge May 21 '14 at 06:01
ok can you try with .on for mouse event binding as updated in answer – Bhushan Kawadkar May 21 '14 at 06:06
yes i try @bhushan but not work ... :( still working fine in Chrome – azhar_SE_nextbridge May 21 '14 at 06:14
Can you please suggest me any other option...?? – azhar_SE_nextbridge May 21 '14 at 06:40
I think there is no issue in jQuery script as it is working on chrome. there might be some browser specific issue.. please follow this link and try to find out error on browser console https://developer.mozilla.org/en/docs/Error_Console – Bhushan Kawadkar May 21 '14 at 06:44
when i try without disabling my textfield it is working fine with Firefox also but in my case i want to disable this field but want to show tooltip on hover.. Have you any idea how to do...?? – azhar_SE_nextbridge May 21 '14 at 06:47
try using disabled = "true" instead of disabled = "disabled". – Bhushan Kawadkar May 21 '14 at 06:56
it is updated Fiddle please Check in Firefox... Fiddle – azhar_SE_nextbridge May 21 '14 at 06:58
@Bhusshan i try with disabled="true" but not working – azhar_SE_nextbridge May 21 '14 at 07:05

score 0 · Answer 4 · answered May 21 '14 at 05:37

0

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.

answered May 21 '14 at 05:37

Manish Gautam

516
2
7
19

I did the same way you suggest actually i am showing a tooltip when user move mouse on it and hide this tooltip when he swap out from the textbox... When i insert break point in my javascript code then this event fire without hovering of mouse at the time of loading. – azhar_SE_nextbridge May 21 '14 at 05:45
can you replicate the problem on jsfiddle. or else try mouseenter, here's a link that explains it http://api.jquery.com/mouseenter/ – Manish Gautam May 21 '14 at 05:50
strange it works for me in firefox too, the tooltip shows up when i hover over the div – Manish Gautam May 21 '14 at 06:01
can you check once if there are multiple controls being rendered for "WorkFlowValue" textbox or "textboxWorkFlow" div, check in the view source, otherwise i dont see a problem with the jquery codes. – Manish Gautam May 21 '14 at 06:34
Rendering Control

– azhar_SE_nextbridge May 21 '14 at 06:36
when i try without disabling my textfield it is working fine with Firefox also but in my case i want to disable this field but want to show tooltip on hover.. Have you any idea how to do...?? – azhar_SE_nextbridge May 21 '14 at 06:47
i came out with a fix.. use this in your div style="display:block;padding:1px;" and it will work in firefox also – Manish Gautam May 21 '14 at 06:57
please check this Fiddle http://jsfiddle.net/NLT8p/143/ as you say i do but it effect by custom css and not working properly as it is fire on some special area of textbox not with the area of whole textbox.... Can you please take look and suggest – azhar_SE_nextbridge May 21 '14 at 07:05

Mouseover Mouseout not work in firefox

4 Answers4