jQuery UI 按钮 - 保持活动状态，忽略悬停状态

Posted 2023-05-08

【中文标题】jQuery UI 按钮 - 保持活动状态，忽略悬停状态

【英文标题】：jQuery UI buttons - keep active state, ignore hover state

【发布时间】：2012-04-26 18:49:08

【问题描述】：

正如前面另一个问题中提到的，我有一个系统，它可以显示内容并根据哈希标签突出显示一个按钮。这在大多数情况下都可以正常工作，但是如果您将鼠标悬停在按钮上，它就会失去其活动状态。

这里是问题的[工作示例][1]。

我试过.hover(function() return false;);，但不幸的是这不起作用（虽然我想我没想到它会......！）。我还尝试禁用该按钮（然后在单击另一个按钮时重新启用它），这在 Firefox 中是完美的，但在 IE7 中文本显示为灰色。

非常感谢任何帮助或建议，谢谢:)

【问题讨论】：

您刚刚链接到http://localhost。在某些论坛中，这几乎与[img]file:///C:/Users/..../me.jpg[/img] 一样聪明：p

将 localhost 替换为您的 ip 地址或发布演示到jsfiddle.net

天哪，我不敢相信我做到了！更新了链接，这是为了指出那些家伙:-)

制作一个 jsfiddle 比通过现场评分更容易让我们找到问题。

我看不到问题和代码，因为它不是 jsfiddle.... 这个答案就这么多。

【参考方案1】：

首先，您的按钮提交#，它不会使链接转到另一个页面，但会产生一些不需要的滚动。你应该避免这样。

$('#showScarringReports').click(function(ev) ev.preventDefault(); );

之后，如果您希望保持活动状态，您可以禁用事件处理程序，使其从活动状态切换回原来的状态。再次以第一个为例。

$('#showScarringReports').unbind('mouseout keyup mouseup hover');

一旦处于活动状态，它将保持活动状态，要删除活动状态，然后只需从按钮中删除类 ui-state-hover。

【讨论】：

哇，这太完美了——非常感谢！您不仅解决了问题，还解决了另一个问题 - 非常感谢，谢谢:)

【参考方案2】：

另一个解决方案对我不起作用，所以我不得不使用这个：

$('#my-button')
    .button(disabled:true)
    .removeClass('ui-state-disabled')
    .addClass('ui-state-active') //permanently pressed
    .addClass('ui-state-hover')  //or permanently highlighted
;