jQuery 不会在禁用按钮上触发悬停事件吗？答案

【问题标题】：Does jQuery not fire hover event on a disabled button?jQuery 不会在禁用按钮上触发悬停事件吗？
【发布时间】：2012-03-16 01:51:17
【问题描述】：

我正在实现一个表单，我想禁用 button 并显示一个工具提示，解释为什么它在悬停时被禁用。但是，当 button 被禁用时，工具提示不会显示。

我在这里添加了一个测试用例，仅使用 jQuery 进行复制：http://jsfiddle.net/BYeFJ/1/

好像是jQuery没有触发事件，还是浏览器没有触发悬停事件？

我正在使用 Twitter Bootstrap's Tooltip Module，当然还有 jQuery。

注意：我也尝试过在按钮周围使用包装器 - 但它似乎吞下了悬停状态，我也尝试使用 input 元素，达到同样的效果。

【问题讨论】：

标签： jquery html forms button twitter-bootstrap

【解决方案1】：

这会有所帮助

<style>
 .btn{
   padding: 0 !important; // or get padding size of .btn
 }

 .button{
  padding: 8px 30px 6px;
 }
</style>

<body>
 <button type="submit" id="submit_form" class="btn" disabled/>
  <div class="button">Submit</div>
 </button>

 <script>
  $('.button').hover(function (){
    // place code here
  });
 </script>
</body>

【讨论】：

【解决方案2】：

添加“ui-button-disabled”和“ui-state-disabled”类，使其看起来像一个禁用的按钮，并在点击函数中检查这些以确定状态。当您需要启用的外观时将其删除。

【讨论】：

【解决方案3】：

按照詹姆斯的指南，我已经尝试过这样的

<div id="wrapper">
<button id='overlay'>BUTTON</button>
<button disabled>BUTTON</button></div>

#overlay{
position: absolute;
opacity: 0;}

我在旧按钮前面放了一个带有相同文本的假按钮，并为其设置了 id。在 css 中，我设置了位置，让这个新按钮与 wrapper 相对，这样这个新按钮就会和禁用的按钮放在同一个空间中。

这是我的小提琴： http://jsfiddle.net/p2j041Ln/

【讨论】：

【解决方案4】：

一种可能的解决方案是仅使其准备就绪：

<button id="disabledbutton" readonly="readonly">Disabled Button</button>

然后将 css 更改为禁用并覆盖 onclick 以防止任何操作：

$('#disabledbutton').click(function() { return false; } );

【讨论】：

【解决方案5】：

您可以在按钮上放置一个透明覆盖层，然后在上面放置工具提示。

http://jsfiddle.net/yL2wN/

<div id="wrapper">
    <div id="overlay"></div>                
    <button disabled>BUTTON</button>
</div>

#wrapper{
    position: relative;   
}
#overlay{
    position: absolute;        
    top: 0;
    left: 0;

    opacity: .1;
    height: 20px;
    width: 70px;
}

在小提琴中，我将颜色设置为蓝色，这样您就可以看到发生了什么。叠加层的宽度和高度可以根据需要调整或在js中动态化。

【讨论】：