jquery - jQuery 不会在禁用的按钮上触发悬停事件吗？

Question

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

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

似乎是 jQuery 没有触发事件，或者是浏览器没有触发 hover 事件？

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

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

Answer 1

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

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;
}​

在 fiddle 中，我将颜色设置为蓝色，这样您就可以看到发生了什么。 overlay的宽高可以根据需要调整，也可以在js中动态化。