1

我有一个导航栏，可以在悬停时显示内容。你可以在这里看到一个工作演示：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 来实现更流畅、更可靠的结果？

4

4 回答 4

0

奇怪的是，我在 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

由于您不应该在同一文档中使用相同的IDid="tooltip" ，因此我将其全部转换为class="tooltip".

还要注意在脚本中我将 a 添加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

于 2013-01-10T22:03:16.983 回答
0

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

在此处输入图像描述

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

于 2013-01-10T20:48:15.043 回答
0

jsFiddle 演示

#navButtons li span你忘了给你的CSS 选择器添加一个属性。

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

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

于 2013-01-11T06:39:02.313 回答
0

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

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

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

只是另一种选择:)

于 2013-01-10T20:58:31.620 回答