Javascript: enable/disable button with mouseover/mouseout

javascript onmouseover onmouseout
Loony2nz picture Loony2nz · Nov 16, 2009 · Viewed 13k times · Source

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

Shawn Steward picture Shawn Steward · Nov 16, 2009

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>

Related questions

Change Text Color on mouseover

I'm hoping to accomplish this using pure CSS and Javascript. I'm ok with PHP as well. I'm avoiding jquery because I'm trying to learn javascript a bit more and I've found that in some word-press sites jquery doesn't always work …

Read More
change text on mouse over and change back on mouse out

I want to have a table that changes itself on mouse over and changes back to the original on mouse out. Here the best I can do: <html> <body> <div id="line1"> <table …

Read More
Javascript play sound on hover. stop and reset on hoveroff

function EvalSound(soundobj) { var thissound=document.getElementById(soundobj); thissound.currentTime = 0; thissound.Play(); } function StopSound(soundobj) { var thissound=document.getElementById(soundobj); thissound.Stop(); } This is my code to play a audio file, onmouseover="EvalSound('sound1')" onmouseout="StopSound('sound1')" It …

Read More