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

f3temu5u 于 2023-01-08 发布在 jQuery

关注(0)|答案(6)|浏览(172)

我正在实现一个表单，我想禁用一个button，并在悬停时显示一个工具提示来解释为什么它被禁用，但是当button被禁用时，工具提示不会显示。
我在这里添加了一个测试用例，只使用jQuery进行复制：http://jsfiddle.net/BYeFJ/1/
jQuery似乎没有触发事件，或者浏览器没有触发悬停事件？
我使用Twitter Bootstrap's Tooltip Module，当然还有jQuery。
NB：我也尝试过在按钮周围使用一个 Package 器--但是它似乎吞下了悬停状态，我也尝试过使用一个input元素，达到同样的效果。

jquery

来源：https://stackoverflow.com/questions/9450641/does-jquery-not-fire-hover-event-on-a-disabled-button

6条答案

按热度按时间

vx6bjr1n1#

你可以在按钮上放一个透明的覆盖层，然后把工具提示放在上面。
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中，我将颜色设置为蓝色，这样您就可以看到正在发生的事情，覆盖层的宽度和高度可以根据需要进行调整，或者在js中动态化。

赞(0）回复(0）举报 2023-01-08

brc7rcf02#

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

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

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

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

赞(0）回复(0）举报 2023-01-08

d6kp6zgx3#

跟随詹姆斯的指引，我已经试过了

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

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

我把一个带有相同文本的假按钮放在旧按钮的前面，并给它设置id，在css中，我设置了一个位置，让这个新按钮与 Package 器相对，这样这个新按钮就会和被禁用的按钮放在同一个空间。
这是我的小提琴：http://jsfiddle.net/p2j041Ln/

赞(0）回复(0）举报 2023-01-08

q35jwt9p4#

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

赞(0）回复(0）举报 2023-01-08

kmpatx3s5#

这可能会有帮助

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

赞(0）回复(0）举报 2023-01-08

z4bn682m6#

我也遇到过类似的弹出窗口问题......所以我将分享我是如何解决的

<span class="d-inline-block" data-toggle="popover" data-content="Some text">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

赞(0）回复(0）举报 2023-01-08

我来回答

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

6条答案

相关问题

热门标签

最新问答