Question

我正在实施一个表单，我希望禁用button并显示一个工具提示，解释为什么它在悬停时被禁用。但是，如果禁用button，则工具提示不会显示。

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

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

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

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

Answer 1

您可以在按钮上放置透明覆盖图并将工具提示放在该按钮上。

<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中动态显示。

Answer 2

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

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

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

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

Answer 3

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

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

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

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

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

Answer 4

添加“ui-button-disabled＆＃39;和＃ui-state-disabled＆＃39;类，所以它看起来像一个禁用按钮，并在单击功能中检查这些以确定状态。需要启用外观时删除它们。

Answer 5

这可能会有所帮助

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

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

5 个答案: