2014-11-16 11:31

Javascript onmouseover&onmouseout无法禁用按钮[重复]


This question already has an answer here:

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!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答


  • dongnao9525 dongnao9525 7年前

    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.

    点赞 评论 复制链接分享
  • dongyou8368 dongyou8368 7年前

    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"

    点赞 评论 复制链接分享