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

【问题标题】：jQuery hover problems: 1. z-index? 2. unbind/rebind?jQuery 悬停问题： 1. z-index？ 2. 解绑/重新绑定？
【发布时间】：2011-12-22 04:47:00
【问题描述】：

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

Z 索引。因此，正如您将在代码中看到的那样，当您将鼠标悬停在 div 上时，红色的 topIconNew div 不会保持静止，但我希望它保持静止。我意识到这是因为它位于 html 中的 topTip 和 topDrop div 下方，所以当它们出现时，它会随着它们一起移动。但是，我必须将它放在 html 中的这些 div 下方，因为它是相对定位的，所以无论 topIconNew div 是否存在，它都必须始终位于 html 中的第一个位置。我想也许我可以通过使用 z-index 来完成这一切，但 CSS 在这里还不够。 jQuery有什么要改变的吗？
解除绑定/重新绑定。在 jQuery 代码中，我有 .unbind("hover") 单击 topIconNew 以显示 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') 不起作用？

【问题讨论】：

这是大量需要查看的文本/代码。我怀疑你的问题会得到回答。你能把它浓缩成一个简单的测试用例来演示你的问题吗？
会的……我也这么想。我将努力使其更容易回答，并且可能只是将其分成 2 个问题。感谢您的提醒。
我认为你应该拆分问题。而且，你到底想在这里完成什么？我看了你的代码，我不知道最终结果应该做什么。我认为 topTip 是一个自定义工具提示，但是当您到达 topDrop 时，您已经失去了我。 topiconNew 是干什么用的？
本质上，topIcon 是一个导航图标，而 topIconNew 是一个通知图标。当您单击导航图标时，它会将您带到 X 页面。当您将鼠标悬停在 topIcon 时，会显示 topTip（它将是一个工具提示），当您单击 topIconNew 时，工具提示会展开，并且会出现一个下拉列表 (topDrop) 以显示您的通知。这就是我在这里尝试做的事情的本质。

标签： jquery hover z-index unbind

【解决方案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() 或任何合适的。

【讨论】：