Javascript onmouseover & onmouseout not working to disable button [duplicate]

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!

Answer 1

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.

Answer 2

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"