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

Question

我遇到了.hover（）的问题。我想暂时禁用它，我已经完成了，但它有一个我想要摆脱的意想不到的副作用。

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

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

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

Answer 1

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

请参阅this fiddle

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

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

Answer 2

您需要移除展开时设置的宽度。

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

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

到

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

Answer 3

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

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