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

Question

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

正如您所看到的，它工作得相当好，但它有一点but。

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

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

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

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

Answer 1

使用工具提示的CSS。将padding-top:20px; margin-top:-20px添加到span#tooltip会使提示的位置与图标一样高；因此，无法“鼠标移出”这些链接。由于图标的z值高于工具提示，因此从一个图标移动到另一个图标没有任何不良影响。

​

​

(为说明目的而添加的大纲)

Answer 2

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

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

此外，只需隐藏具有不透明度的元素将使它们更具可访问性。

只是另一种选择:)

Answer 3

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

代码如下：

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;
}

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

请参阅