Javascript: enable/disable button with mouseover/mouseout

Question

This should be pretty straightforward:

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

If I place the mouse cursor over this button, it gets disabled..yay! But now when I move the cursor out, it doesn't get enabled...boo.

I understand the concept of disabling it means you can't do anything with it. But how do you get it to be enabled with a mouse out? Is it possible? Am I missing something?

Answer 1

You should 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. You can set disabled='anything' and it will be disabled. It used to be that you only needed the keyword disabled in your attributes but for valid XHTML you need to set every attribute equal to something.

EDIT: I played around with this a little bit and added some padding to the SPAN tag and it allows the events to work properly. Without padding, it's not trapping the events because the input button is disabled. I just made the background red so it was easy to see the area the SPAN used up.

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

Answer 2

Divs to the Rescue!

Too bad no one has really answered this question. It is possible to do*.

<div style="display: inline-block; position: relative">
<input type="button" id="button" disabled="disabled">
<div id="buttonMouseCatcher" style="position:absolute; z-index: 1;
  top: 0px; bottom: 0px; left: 0px; right: 0px;">
</div>

Then:

• Put a mouse-over handler on buttonMouseCatcher that:
  • changes it's z-index to -1 and
  • enables the button.
• Put a mouse-out handler on button that:
  • changes the z-index of buttonMouseCatcher back to 1 and
  • disables the button.

Answer 3

Disabled form elements don't fire mouse events, by the spec.

What I use as a workaround is to simulate the disabled behavior with a 'disabled' class and event handles associate with it. Works well for buttons, but I suppose it wouldn't for text inputs and checkboxes.

Answer 4

you could have an outer element that surrounds it and have an onmouseover for that outer element that enables the inner element.