使用 Jquery 或 css3 悬停显示导航答案

【问题标题】：Navigation with hover reveal using Jquery or css3使用 Jquery 或 css3 悬停显示导航
【发布时间】：2012-12-25 07:56:00
【问题描述】：

我有一个导航栏，可以在悬停时显示内容。你可以在这里看到一个工作演示：http://codepen.io/anon/pen/wjciG

如您所见，它运行得相当好，但它有点错误。

我的jquery很简单，绝对可以改进：

$("#navButtons li").hover(function(){
     $(this).find("span#tooltip").stop().fadeIn(300);
}, function(){
     $(this).find("span#tooltip").stop().fadeOut(300);
});

span#tooltip 绝对位于可悬停链接下方，因此当用户将鼠标悬停在链接上，然后尝试悬停在工具提示/框上时，它会闪烁（因为有一段时间用户没有悬停在任何事物）。我需要允许用户将鼠标悬停在一个元素上，看到该框淡入，然后允许用户将鼠标悬停在该框上并单击其中可能包含的任何链接或内容。

有没有更好的方法来使用 Jquery 或 CSS3 来实现更流畅、更可靠的结果？

【问题讨论】：

一种解决方法是添加一个具有透明背景的绝对定位的 div 来填充该空间，因此用户实际上永远不会将鼠标悬停在列表项之外......但这很脏。其他想法？
不要不，永远不要再在每页使用多个ID！把#tooltip改成一个类！
+1 很好的问题！

标签： jquery hover

【解决方案1】：

一种可能的替代方法是仅使用 CSS 来实现淡入和淡出效果。

我整理了一个快速而肮脏的例子here 来展示如何做到这一点。有明显的警告，并非所有浏览器都支持它，但在当前示例中禁用 javascript 的用户也可以这样说。 CSS 版本仍然可以使用，只是会出现和消失而不会褪色。

此外，仅隐藏不透明元素将使它们更易于访问。

只是另一种选择:)

【讨论】：

【解决方案2】：

奇怪的是，我在 pass 项目中遇到了同样的问题。解决方案是在使用 javascript 的 setTimeout 方法隐藏 tooltip 之前添加延迟。

这里是代码：

var closeTip = new Array();
$("#navButtons li").each(function (i) {
  var $this = $(this);
  $this.hover(function () {
    clearTimeout(closeTip[i]); // cancell closing tooltip
    if ($this.hasClass('visible')) {
      return false; // we are still on, do nothing else
    } else {
      // we moved to another "li" element so reset everything
      $("#navButtons li").removeClass('visible');
      $("span.tooltip").hide(); 
    }
    // show "this" tooltip and add class "visible" as flag
    $this.addClass('visible').find("span.tooltip").stop().fadeIn(300).mouseenter(function () {
      clearTimeout(closeTip[i]); // cancell closing itself even if we leave 
    });
  },
  function () {
    // delay closing tooltip unless is cancelled by another mouseenter event
    closeTip[i] = setTimeout(function () {
      $this.removeClass('visible').find("span.tooltip").stop(true, true).fadeOut();
    }, 500);
  });
}); // each

由于您不应该在同一个文档中使用相同的ID，我将所有id="tooltip" 转换为class="tooltip"。

还要注意在脚本中我将class="visible" 添加到悬停元素并为该选择器设置相同的css 属性

#navButtons li.hours:hover span, #navButtons li.hours.visible span {
  background-position: -1px -35px;
}
#navButtons li.login:hover span, #navButtons li.login.visible span {
  background-position: -41px -35px;
}
#navButtons li.newsletter:hover span, #navButtons li.newsletter.visible span {
  background-position: -83px -35px;
}

...所以当我们从按钮移到工具提示时，按钮也不会闪烁。

见JSFIDDLE

【讨论】：

【解决方案3】：

玩转工具提示的 CSS。将padding-top:20px; margin-top:-20px添加到span#tooltip，使tip的位置与图标一样高；因此，没有办法“mouseout”这些链接。而且由于图标的 z 值高于工具提示，因此从一个图标移动到另一个图标不会产生不良影响。

（为说明目的添加了大纲）

【讨论】：

并将id="tooltip"更改为class="tooltip"

【解决方案4】：

jsFiddle DEMO

您忘记向 #navButtons li span CSS 选择器添加一个属性。

margin-bottom: 25px; /* 20px is the tooltip distance, but a little extra helps */

之所以可行，是因为margin-bottom 是“盒子模型”的一部分，hover 事件可以针对该模型监视任何状态变化。还要更改您的工具提示 id，以便改为 classnames，因为您不能在网页上使用相同的 id 两次。

【讨论】：