我正在尝试创建像 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" 显示为工具提示,如图所示。如果用户没有悬停工具提示,我还需要隐藏此工具提示。我怎样才能做到这一点?