当前位置：文江博客话题详情

Javascript：通过鼠标悬停/鼠标悬停启用/禁用按钮

发布于 2024-08-12 04:41:14 字数 293 浏览 3 评论 0原文

这应该非常简单：

如果我将鼠标光标放在此按钮上，它就会被禁用..耶！但现在当我将光标移出时，它没有被启用......嘘。

我理解禁用它的概念意味着你不能用它做任何事情。但是如何才能在鼠标移出时启用它呢？是否可以？我错过了什么吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

洒一地阳光 2024-08-19 04:41:14

您应该将 mouseout 设置为 disabled = ''。

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

禁用属性只会查看它是否存在。您可以设置disabled='anything'，它将被禁用。过去，您只需要在属性中使用关键字 disabled，但对于有效的 XHTML，您需要将每个属性设置为相同的值。

编辑：
我对此进行了一些尝试，并向 SPAN 标记添加了一些填充，它允许事件正常工作。如果没有填充，它不会捕获事件，因为输入按钮被禁用。我只是将背景设为红色，这样就可以很容易地看到 SPAN 用完的区域。

<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>

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>

回复收藏 0 原文

写下不归期 2024-08-19 04:41:14

潜水员来救援！

可惜没有人真正回答这个问题。这是可以做到的*。

<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>

然后：

在 buttonMouseCatcher 上放置一个鼠标悬停处理程序：
- 将其 z-index 更改为 -1 并
- 启用该按钮。
在按钮上放置一个鼠标移出处理程序：
- 将 buttonMouseCatcher 的 z-index 更改回 1 并
- 禁用该按钮。

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.

回复收藏 0 原文