jQuery的是否不被禁用按钮触发悬停事件？ [英] Does jQuery not fire hover event on a disabled button?

问题描述

我采取一种形式，因此，我想禁用按钮并显示工具提示解释为什么它的悬停禁用。然而，当一个按钮禁用工具提示不显示。

I'm implementing a form, whereby I'm wanting to disable a button and show a tooltip explaining why it's disabled on hover. However when a button is disabled the tooltip does not show.

我已经在这里添加了一个测试用例，只有jQuery的重现： http://jsfiddle.net/BYeFJ/1/

I've added a test case here, reproducing with just jQuery: http://jsfiddle.net/BYeFJ/1/

似乎jQuery的不点火的情况下，或者是浏览器不点火的悬停事件？

It seems that jQuery is not firing the event, or is the browser not firing the hover event?

我使用 Twitter的引导的工具提示模块当然还有，jQuery的

I'm using Twitter Bootstrap's Tooltip Module and of course, jQuery.

注：我也试图与按钮周围的包装 - 但它吞下它似乎悬停状态，我已经使用输入也试过元素到同样的效果。

NB: I've also tried this with a wrapper around the button - but it swallows the hover state it seems, and I've also tried using an input element, to the same effect.

推荐答案

您可以把透明覆盖在按钮上，并把提示这一点。

You could put a transparent overlay over the button and put the tooltip on that.

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做动态调整。

In the fiddle, I set the color to blue just so you can see what's going on. The width and height of the overlay can be adjusted as needed or made dynamic in js.

这篇关于jQuery的是否不被禁用按钮触发悬停事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！