jQuery悬停问题： 1. z-index？ 2. 解绑/重新绑定？

Question

让我知道这是否真的应该作为两个单独的问题来问，但因为它处理相同的代码块（在下面的小提琴中：http://jsfiddle.net/jhacks/xCcdn/89/），我觉得这最适合一个主题。让我知道是否应该编辑并将其分成两部分。无论如何，希望您可以查看代码...我遇到的以下问题：

1. Z-index。因此，正如您将在代码中看到的那样，当您将鼠标悬停在 div 上时，红色的 topIconNew div 不会保持静止，但我希望它保持静止。我意识到这是因为它位于 html 中的 topTip 和 topDrop div 下方，所以当它们出现时，它会随之移动。但是，我必须将其放置在 html 中这些 div 的下方，因为它是相对定位的，因此无论 topIconNew div 是否存在，都必须使其自身定位一致，它需要位于 html 中的第一个位置。我想也许我可以通过使用 z-index 来实现这一切，但 CSS 在这里还不够。 jQuery 中是否有需要更改的内容？

2. 解除绑定/重新绑定。在 jQuery 代码中，我在单击 topIconNew 时使用 .unbind("hover") 来显示要显示的 topTip 和 topDrop div。我希望在显示 topTip 和 topDrop div 时禁用悬停。但是，当尝试在 .click(document) 函数中使用 .rebind("hover") 时，它仍然无法工作。解决 .hover 暂时禁用的最佳方法是什么？

另外，关于悬停：如果您要删除 .unbind("hover") 代码行，您会注意到当显示 topTip/topDrop div 时，悬停行为会很奇怪。当指针移开时，另一个悬停 topTip div 不会隐藏，该 div 会永久存在。当 topTip/topDrop div 存在时，如果有一个悬停选项仍然可以正常工作（而不是上面提到的暂时禁用悬停的方法），那就太好了。当然，我希望悬停的 div 始终位于打开的 topTip/TopDrop div 的下方。

无论如何，如果我的问题和/或代码不清楚，请告诉我。另外，如果更好的话，我也可以创建另一篇文章来分隔这些问题。无论如何，感谢任何和所有的帮助...谢谢！

另外（并不是那么重要，因为我认为我可以找出哪里出错了），为什么我的 .css('background-color:#555555') 不起作用？

Answer 1

抱歉，我没有时间对这两个问题给出完整的答案，但我对此部分有一个简单的答案：

暂时禁用 .hover 的最佳方法是什么？

我的首选方法是使用一个 hoverEnabled 变量并让悬停处理程序永久绑定 - 这是一个非常通用的示例（替换您自己的选择器和处理）：

$(document).ready(function() {

   var hoverEnabled = true;

   $("someselector").hover(
      function() {
         if (!hoverEnabled)
            return;

         // actual mouse enter processing here
      },
      function() {
         if (!hoverEnabled)
            return;

         // actual mouse leave processing here
      }
   );

   $("someotherselector").on("some event", function() {
      hoverEnabled = false;
   });

   $("someotherselector").on("some other event", function() {
      hoverEnabled = true;
   });
});

显然，此技术适用于您想要临时绑定的任何事件禁用（也可用于暂时“禁用”setInterval 处理），当然您不必使用 .on()，您可以使用 .click() 或任何合适的方法。