Javascript onmouseover & onmouseout not working to disable button

Question

I'm trying this piece of code to achieve a button that gets disabled on mouse hover and gets enabled on mouse out.

<input type="button" value="submit" onMouseOver="this.disabled = true;" onMouseOut="this.disabled = false;" />

But it doesn't seem to work. It disables the button on mouse over but doesn't enable it on mouse out. Any suggestions? Thanks!

also try to use `onmouseover=` and `onmouseout=` without capital letters. — Edan Feiles, Nov 16 '14 at 11:41
Why are you disabling the submit button? I bet i could convince you to use the form validation api ;) — Endless, Nov 16 '14 at 11:43
There's nothing wrong with that code. Check if there is a compatibility issue or if you have related errors elsewhere. Tested in Jsfidle on OS X Safari: http://jsfiddle.net/ke8z80h7/ — Alex, Nov 16 '14 at 11:44
Please see the answer on this question. Input's don't fire events when disabled. http://stackoverflow.com/questions/3100319/event-on-a-disabled-input — Alex, Nov 16 '14 at 11:49

Oleksandr T. · Accepted Answer · 2014-11-16T11:52:39.743

6

Disabled elements do not fire events. You can place a element over top of the element and listen to the event fired on that element.

edited Nov 16 '14 at 11:52

answered Nov 16 '14 at 11:46

Oleksandr T.

76,493
17
173
144

Beautiful! Just put it inside a div and made the event listening on the div. Thanks! – The High Guy Nov 16 '14 at 12:01

score 2 · Answer 2 · edited May 23 '17 at 11:44

One would set the mouseout to disabled = '' instead.

<input type="button" name="test" id="test" value="roll over me" onmouseover="this.disabled=true;" onmouseout="this.disabled='';">

The disabled property only looks to see if it's there at all. One can set disabled='anything' and it will be disabled. Furthermore, add padding to the SPAN tag and will allow the events to work properly. Without padding, it will not trap the events because the input button is disabled. In the code below, a green background is added to display the SPAN area.

<span style="padding: 8px; background: green;"  onmouseout="this.firstChild.disabled='';"><input type="button" name="test" id="test" value="roll over me" onmouseover="this.disabled=true;"></span>

Hope this helps!

Source: "Javascript: enable/disable button with mouseover/mouseout"

atleast give credit to this http://stackoverflow.com/questions/1744138/javascript-enable-disable-button-with-mouseover-mouseout — Vitorino fernandes, Nov 16 '14 at 11:46

Javascript onmouseover & onmouseout not working to disable button

2 Answers2