0

我正在构建一个下拉菜单。主图像有一个翻转和一个滚动事件切换显示包含我的弹出菜单的 div。问题是当我推出主图像时，我的弹出菜单消失了（显然！）。我希望能够将鼠标移到弹出菜单上而不会消失。我还希望图像具有翻转状态 - 这是我的代码：

<a class="mypage" href="mypage.html" id="mypageid" onmouseover="document.getElementById('menu-container').style.display = 'block';"  onmouseout="document.getElementById('menu-container').style.display = 'none';"></a>
<div id="menu-container">
    <ul>
        <li><a href="#"><img src="images/nav/button1.jpg" alt="" width="126px" height="21px"/></a></li>
        <li><a href="#"><img src="images/nav/button2.jpg" alt="" width="126px" height="21px"/></a></li>
        <li><a href="#"><img src="images/nav/button3.jpg" alt="" width="126px" height="21px"/></a></li>
    </ul></div>
4

3 回答 3

1

用于解决此问题的常见模式是使用计时器延迟隐藏菜单。如果用户的鼠标在计时器触发之前重新进入触发器或菜单本身，则计时器（和隐藏）被清除。

var menuTimer = null;

$('.mypage, #menu-container').mouseenter(function(e) {
    $('#menu-container').show();
    clearTimeout(menuTimer);
});

$('.mypage, #menu-container').mouseleave(function(e) {
    menuTimer = setTimeout(function() {
        $('#menu-container').hide();
    }, 300);
});

示例：http: //jsfiddle.net/xA6MH/

这个概念可以很容易地适应 vanilla JS。

于 2012-10-18T22:20:58.320 回答
0

我强烈建议阅读此问题的最终解决方案之一 - A List Apart 上的Hybrid CSS Dropdowns 。

于 2012-10-18T22:23:06.040 回答
0

这个页面可以帮助你。

http://cssmenumaker.com/css-drop-down-menu

他们有一个菜单制作器，你可以看到 CSS 是如何工作的。

于 2012-10-18T22:21:54.980 回答