javascript - Javascript：使用鼠标悬停/鼠标悬停启用/禁用按钮

Question

这应该很简单：

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

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

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

Answer 1

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

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

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>

Answer 2

迪斯救援！

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

<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 和
  • 禁用按钮。

Answer 3

根据规范，禁用的表单元素不会触发鼠标事件。

我用作解决方法的是使用“禁用”类和与之关联的事件句柄来模拟禁用行为。适用于按钮，但我想它不适用于文本输入和复选框。

Answer 4

你可以有一个围绕它的外部元素，并有一个用于启用内部元素的外部元素的鼠标悬停。