jQuery：暂时禁用hover…意外的副作用

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

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

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

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

Answer 1

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

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

Answer 2

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

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

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

至

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

Answer 3

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

看到这个小提琴

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

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