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

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.

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

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

我在这里添加了一个测试用例,只用jQuery重现:http://jsfiddle.net/BYeFJ/1/

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

似乎jQuery没有触发事件,或者浏览器没有触发悬停事件?

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

我正在使用Twitter Bootstrap的工具提示模块,当然还有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.

注意:我也试过这个按钮周围的包装 - 但是它似乎吞下了悬停状态,我也尝试使用输入元素,达到同样的效果。

5 个解决方案

#1

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

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.

在小提琴中,我将颜色设置为蓝色,这样您就可以看到正在发生的事情。可以根据需要调整叠加的宽度和高度,或者以js为动态。

#2

One possible solution is to make it ready only:

一种可能的解决方案是只做好准备:

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

Then change the css to look disabled and override the onclick to prevent any action:

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

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

#3

Follow James's guide, I have tried like this

按照詹姆斯的指南,我试过这样的

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

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

I put a fake button with the same text in front of the old and set id to it. In the css, I set the position to let this new button become relative with the wrapper, so that this new button will be placed in the same space with the disabled button.

我在旧的前面放了一个带有相同文字的假按钮并设置了它的ID。在css中,我设置位置让这个新按钮与包装器成为相对的,这样这个新按钮就会与禁用按钮放在同一个空间中。

Here is my fiddle: http://jsfiddle.net/p2j041Ln/

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

#4

Add 'ui-button-disabled' and 'ui-state-disabled' classes so it will look like a disabled button and check for these in the click function to determine the state. Remove them when you need the enabled look.

添加'ui-button-disabled'和'ui-state-disabled'类,使其看起来像一个禁用按钮,并在click函数中检查这些以确定状态。需要启用外观时删除它们。

#5

This could help

这可能有所帮助

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

#1