1

在此处输入图像描述

我正在尝试创建像 Google+ 这样的功能，如果用户调整窗口大小，左侧的菜单项会被隐藏，当用户悬停更多链接时，隐藏的菜单项开始显示在工具提示中，如上图所示。

我已经完成了一半。我捕获了窗口调整大小事件并成功地将隐藏列表项 (li) 附加到了一个 div 中。这是我的代码：

<ul>
      <li><a href="#"><img alt="" src="../images/icons/home_active.png"> <em>Home</em></a></li>
      <li><a href="#"><img alt="" src="../images/icons/msg_active.png"> <em>Messages</em></a></li>
      <li><a href="#"><img alt="" src="../images/icons/reports_active.png"> <em>Reports</em></a></li>
      <li style="display: none;"><a href="#"><img alt="" src="../images/icons/mng_active.png"> <em>Manager</em></a></li>
      <li style="display: none;"><a href="#"><img alt="" src="../images/icons/shop_active.png"> <em>Shop</em></a> </li>
      <li class="mymore" style="display: block;"><a href="#"><img alt="" src="../images/icons/more_active.png"> <em>More</em></a> 
        <div id="mytooltip" style=""><a href="#"><img alt="" src="../images/icons/mng_active.png"> <em>Manager</em></a><a href="#"><img alt="" src="../images/icons/shop_active.png"> <em>Shop</em></a> </div>

      </li>
    </ul>

仔细看代码。我在 div id="mytooltip" 中附加了隐藏的 li（检查 li 的 style="diplay:none"）。但是现在悬停在 li 上（具有 class = mymore）我想将 div id="mytooltip" 显示为工具提示，如图所示。如果用户没有悬停工具提示，我还需要隐藏此工具提示。我怎样才能做到这一点？

4

1 回答 1

0

一种选择是让“mymore”链接向工具提示添加一个类，以使其可见。

使用 jquery，您可以使用悬停事件。下面的示例在工具提示中添加了一个“活动”类。这个活动类只是将其显示设置为阻止。

$(".mymore").hover(function () {
    $("#mytooltip").addClass("active"); //hover over
}, function () {
    $("#mytooltip").removeClass("active"); //hover out
});

编辑：如果用户将鼠标悬停在实际的工具提示上，您可能不希望工具提示关闭。您可以使用计时器来解决此问题。例如，如果用户将鼠标移出“mymore”按钮，我们可以尝试在 0.5 秒内关闭该按钮。如果用户在计时器完成之前将鼠标悬停在实际的工具提示上，我们可以简单地清除计时器。

ToolTip = {
    interval: null,
    timer: 600,
    open: function () {
        clearTimeout(ToolTip.interval);
        $("#mytooltip").addClass("active");
    },
    close: function () {
        ToolTip.interval = setTimeout(function () {
            $("#mytooltip").removeClass("active");
        }, ToolTip.timer) //hover out
    }
}

$(".mymore, #mytooltip").hover(function () {
    ToolTip.open() //hover over
}, function () {
    ToolTip.close() //hover out
});

相关小提琴：http: //jsfiddle.net/J9WB7/

于 2013-03-10T01:51:02.047 回答