jQuery：暂时禁用悬停...意外的副作用

Posted 2023-05-08

【中文标题】jQuery：暂时禁用悬停...意外的副作用

【英文标题】：jQuery: temporarily disable hover... unintended side effect

【发布时间】：2012-01-27 19:10:58

【问题描述】：

我遇到了 .hover() 的问题。我想暂时禁用它，我已经这样做了，但它有一个我想摆脱的意外副作用。

以下是我的小提琴：http://jsfiddle.net/sdPVG/7/

我试图在工具提示和下拉菜单打开（topTip 和 topDrop）时禁用悬停。这些 div 在单击红色图标 (topIconNew) 时打开，这会扩大工具提示。不幸的是，工具提示在被点击后会永久加宽。我希望 div 恢复到正常（较窄）状态。我哪里出错了？

任何和所有的帮助表示赞赏。谢谢！

【参考方案1】：

你需要去掉你在展开时设置的宽度。

在您的$(document).click 中，进行以下更改：

$('div.topTip, div.topDrop').hide();

到

$('div.topTip, div.topDrop').hide().css('width', '');

【参考方案2】：

在点击处理程序中，您忘记重新启用悬停。

见this fiddle

您还需要在脚本开头存储原始宽度并恢复每个工具提示 div 的值。 JsFiddle 已更新。

请注意，其他答案通过硬编码值“100px”来设置旧宽度。这已经在您的 css 中定义，复制它是一种不好的编程习惯。我的解决方案在开始时读取值并在需要时重新使用它，因此如果您更改 css，则不必更新 js。

【讨论】：

感谢您解决了我在发布此帖子后立即意识到的另一个问题（我正要尝试删除此帖子以解决此问题，然后再重新发布）。感谢您的修复，我现在在任何必要的地方都重新启用了悬停，并为此编辑了我的帖子。但是，如您所见，在单击 topIconNew 并且工具提示已加宽后，即使重新启用悬停，它仍会保持加宽。我该如何解决这个问题以使其恢复到原来的大小？

@jstacks 我也解决了这个问题。点击答案中的链接

+1 让我们直接不硬编码宽度值！

@jstacks 这没有回答你的问题吗？

【参考方案3】：

您使用动画更改了 topTip div 的大小...需要将其设置回原来的大小。将“//在点击外部时隐藏下拉菜单和工具提示”功能更改为：

$(document).click(
    function()
        hoverEnabled = true;
        $('div.topTip').animate(width:100,marginLeft:0,'fast');
        $('div.topTip, div.topDrop').hide();
    
);