jQuery不禁止停用按钮上的悬停事件吗？

问题描述：

我正在执行一个表单，据此我想禁用button并显示一个工具提示，解释为什么它在悬停时被禁用。但是，当button被禁用时，工具提示不会显示。jQuery不禁止停用按钮上的悬停事件吗？

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

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

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

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

答

你可以在按钮上放一个透明的覆盖层，并在其上放置工具提示。

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中进行动态调整。

即使有一个div包装时，该按钮被“吞”悬停...... – 2012-02-26 05:01:29

有趣，回答更新。 – 2012-02-26 05:10:04

答

一个可行的办法是让它俱备只：

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

然后更改CSS照看残疾和覆盖的onclick，以防止任何行动：

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

答

关注詹姆斯的指导，我有尝试像这样

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

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

我把一个假的按钮与旧的a nd给它设置ID。在CSS中，我设置了让这个新按钮与包装器相对的位置，这样这个新的按钮将被放置在与禁用按钮相同的空间中。

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

答

添加“UI按钮残疾”和“UI状态禁用”类，所以它看起来像一个禁用按钮，在点击功能检查这些确定国家。当你需要启用的外观时删除它们。

答

这将有助于

<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不禁止停用按钮上的悬停事件吗？

相关推荐